Javascript 展开子菜单条件（jQuery）

我被一个jQuery问题困住了，我无法解决这个问题。 我已经创建了一个包含子菜单元素的菜单。我想通过点击菜单项来切换内容的高度。问题是，当我点击其他项目时，内容会崩溃。有点难以解释，我已经放了两个网站来做这项工作 ->当您单击“商店”然后单击“信息”时，子菜单将保持打开状态。这里也看到了同样的伎俩

我猜这两个网站正在使用Shopify

$(document).ready(function() {
    $(".button").on("click", function() {
        if($(".content").height() == 0) {
            $(".content").animate({height: "300px"});
        }
        else if($(".content").height() == 300) {
            $(".content").animate({height: "0px"});
        }
     });
});

这是我的

---

->事先多谢

这是一个版本的fiddle，它使用data属性以具有所需内容的div为目标，并使用另一个包含所需高度的数据标记来设置动画（但还有许多其他方法）。 单击相同的按钮将其关闭，这是通过添加一个指示性类来实现的。 “隐藏”div可能包含更多的div，这些div具有所需的类和布局

$（文档）.ready（函数（）{
$（“.b”）。在（“单击”，函数（）{
变量$this=$（this），
target=$this.data（'target'），
tall=$this.data（'tall'），
内容=$（“.content”）；
target=$（'.+target）.html（）；//获取目标div的html内容
html（target）；//插入所述内容
if（！$this.hasClass（'on'））{//如果尚未单击它。。
$（“.b”）.removeClass（'on'）；//表示未单击任何对象
$this.addClass（'on'）；//假设只单击了这一个
content.animate（{height:tall}，200）；//将动画设置为此按钮数据属性中指定的高度
}否则{
动画（{高度：“0px”}）；
$this.removeClass（'on'）；
}
});
});
.content{
背景：珊瑚；
宽度：100%；
高度：0px；
溢出：隐藏；
}
.隐藏{
显示：无；
}

按钮
按钮
按钮
康特努酒店
一些东西
其他事情
点点滴滴
棒极了，它就像一个符咒。我在看拨动开关的一侧，这不是一个好主意。我只需要添加一个淡入淡出效果的html内容，但你使我的一天。感谢lotno problem@BrunoLandowski在这里额外处理高度数据，将其重新定位到内容div（以便更好地构建html）并在播放中淡出：