Question

我正在使用侧边栏导航（使用引导程序）。但我被困在这里。我无法切换子菜单。当我点击顶部菜单（例如Main，Next Section和Third Section）时，我需要隐藏子菜单。例如，当我单击主菜单时，它必须隐藏所有子仪表板并单击下一部分菜单必须隐藏所有样本部分。

任何有用的帮助

这是结构

<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();
    });
});

DEMO

在侧边栏导航nav-tabs bootstrap中切换子菜单

2 个答案: