jquery - 在侧边栏导航导航选项卡引导程序中切换子菜单

Question

我正在研究侧边栏导航（使用引导程序）。但我被困在这里。我无法切换子菜单。当我点击主菜单、下一节和第三节等顶部菜单时，我需要隐藏子菜单。例如，当我单击主菜单时，它必须隐藏所有子仪表板，然后单击下一节菜单必须隐藏所有示例部分。

任何帮助都非常可观

这是结构

<ul class="nav nav-tabs nav-stacked main-menu">
        <li class="nav-header">Main</li>
        <li><a href='#'>Dashboard</a></li>
        <li><a href='#'>Dashboard</a></li>
        <li><a href='#'>Dashboard</a></li>
        <li><a href='#'>Dashboard</a></li>
        <li class="nav-header">Next Section</li>
        <li><a href='#'>Sample Section</a></li>
        <li><a href='#'>Sample Section</a></li>
        <li><a href='#'>Sample Section</a></li>
        <li><a href='#'>Sample Section</a></li>
        <li class="nav-header">Third Section</li>
        <li><a href='#'>Third Sample Section</a></li>
        <li><a href='#'>Third Sample Section</a></li>
        <li><a href='#'>Third Sample Section</a></li>
        <li><a href='#'>Third Sample Section</a></li>
    </ul>

Answer 1

你可以像这样使用jQuery .nextUntil()..

$('.nav-header').click(function () {
    $(this).nextUntil('.nav-header').toggle(200);
});

演示：http ://bootply.com/67126

Answer 2

$(document).ready(function(){
    $('li.nav-header').click(function(){
        $(this).nextUntil('li.nav-header').toggle();
    });
});

演示