如何在javascript中创建可折叠菜单？

Question

如何在javascript中制作可扩展且可折叠的菜单，点击一个菜单会扩展其中的子项并折叠其他展开的菜单？

Answer 1

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

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

或者，特定于手风琴的图书馆/剧本：http://www.stickmanlabs.com/accordion/

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

Answer 2

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

Answer 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>