html 引导程序折叠元素-折叠未使用的div

q3qa4bjr 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(192)

我们正在将学院的Intranet迁移到Bootstrap模板。在此过程中，我们希望为各个选区添加一些可折叠菜单。您可以在此处查看结果：
http://www.scrippscollege.edu/intranet/index2.html
每个菜单本身都能正确响应（打开和关闭），但我们如何才能使它使用Faculty菜单关闭Students菜单，或者反过来呢？
更新以添加相应代码;下面是菜单中的项目列表：

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

accordion 方法/分类法可以应用到像我们这样的菜单系统吗？我看到的所有例子都涉及堆叠链接。

Html

来源：https://stackoverflow.com/questions/16922841/bootstrap-collapse-element-collapsing-divs-not-in-use

2条答案

按热度按时间

vmjh9lq91#

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

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

赞(0）回复(0）举报 2022-11-27

vm0i2vca2#

这是可折叠元素预期的本机行为，请确保为可折叠元素构建一个组，并正确定义data-toggle、data-parent和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>

赞(0）回复(0）举报 2022-11-27

我来回答

html 引导程序折叠元素-折叠未使用的div

2条答案

相关问题

热门标签

最新问答