Twitter bootstrap 引导折叠元素-正在折叠的div未使用

Twitter bootstrap 引导折叠元素-正在折叠的div未使用,twitter-bootstrap,collapse,Twitter Bootstrap,Collapse,我们正在将学院的内部网迁移到引导模板。在这样做的过程中,我们希望为我们的各个选区添加一些可折叠的菜单。您可以在此处查看结果: 每个菜单本身都能正确响应(打开和关闭),但我们如何才能使其正确响应,以便使用教员菜单关闭学生菜单,或者反之亦然 更新以添加相应的代码;以下是菜单中的列表项: <li><a class="nav-menu" data-toggle="collapse" data-target="#menu-students" href="#">Students&l

我们正在将学院的内部网迁移到引导模板。在这样做的过程中,我们希望为我们的各个选区添加一些可折叠的菜单。您可以在此处查看结果:

每个菜单本身都能正确响应(打开和关闭),但我们如何才能使其正确响应,以便使用教员菜单关闭学生菜单,或者反之亦然

更新以添加相应的代码;以下是菜单中的列表项:

<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-students" href="#">Students</a></li>
<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-faculty" href="#">Faculty</a></li>
<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-staff" href="#">Staff</a></li>
  • 下面是通过上述代码切换的每个div的开头:

    <div id="menu-students" class="collapse clearfix hidden-phone">
    
    <div id="menu-faculty" class="collapse clearfix hidden-phone">
    
    <div id="menu-staff" class="collapse clearfix hidden-phone">
    
    
    

    手风琴方法/分类法能应用于像我们这样的菜单系统吗?我看到的所有示例都涉及堆叠链接。

    您可以使用jQuery隐藏其他打开的'collapse'div。类似于

    $('#menu-top-menu [data-toggle=collapse]').on('click', function (e) {
       $('.collapse').not($(this).data("target")).collapse('hide');
    });
    

    这是可折叠元素的本机行为,请确保为可折叠元素构建组,并正确定义
    数据切换
    数据父项
    href
    属性。请遵循中的示例:

    
    动物教区的陈词滥调。。。
    动物教区的陈词滥调。。。
    
    我认为,当问题询问
    手风琴组的本机行为时,没有必要对手风琴行为进行破解。主要问题并不是真正询问本机行为,而是要求与手风琴结构解耦的类似功能+你应该向我们展示你处理菜单的代码,并告诉我们你尝试了什么。
    
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                    Anim pariatur cliche...
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                    Collapsible Group Item #2
                </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                    Anim pariatur cliche...
                </div>
            </div>
        </div>
    </div>