如何在javascript中制作可折叠菜单？ [关闭]答案

【问题标题】：How do I make a collapsible menu in javascript? [closed]如何在javascript中制作可折叠菜单？ [关闭]
【发布时间】：2010-11-17 14:31:29
【问题描述】：

如何在 java 脚本中创建一个可展开和可折叠的菜单，其中单击一个菜单将展开其中的子菜单并折叠其他展开的菜单？

【问题讨论】：

大约有 3000 种方式。你在使用框架吗？
非常适合谷歌搜索 - 你试过了吗？ SO 往往对努力做出更好的反应
在谷歌中我只能找到可折叠的菜单脚本，这不符合我的目的，即如果您单击另一个菜单就会折叠菜单，因此任何时候只能打开一个菜单跨度>
stackoverflow.com/a/23671064/2261259

标签： javascript menu

【解决方案1】：

除了one of SO's running jokes 的答案之外，您想要的是accordion menu（可能不是为了效果，而是为了包含整个菜单）。

这是一个无库的解决方案：Javascript And CSS Tutorial - Accordion Menus。

或者，手风琴特定的库/脚本：http://www.stickmanlabs.com/accordion/

否则，如果您准备使用库和附加组件，则有很多选择：10 Javascript Accordion Scripts。

【讨论】：

【解决方案2】：

最简单的方法是使用这样的 jQuery 插件：
http://plugins.jquery.com/project/accordion

【讨论】：

【解决方案3】：

在 jQuery 中：

$(".toggle-control").click(function(){
    $(".target-div").hide();
    $(this).next().show();
});

如果你的 html 是这样的：

<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>

【讨论】：