我正在为开发人员构建一个布局模板,以便使用 Bootstrap 3.3.6 集成到他们的 AngularJS/Bootstrap 应用程序中。此布局具有左侧导航上下文菜单,打开时会滑到主页内容的顶部,或者可以选择“固定”打开,然后将主要内容推到右侧。
导航本身采用包含两个按钮的无序列表的形式。这个想法是,当单击按钮时,子菜单内容的相关 div 会切换为显示(使用引导“折叠”和“in”)类。任何其他子菜单内容 div 元素应设置为不显示(没有 'in' 类)。
这变得很棘手。如果您只需单击一个或另一个按钮来专门控制其相关内容元素,它就可以正常工作,切换相关内容的显示。但是,如果您单击每个按钮而没有再次单击同一按钮来关闭其相关内容,则内容 div 的行为是意外的,其中单击的第二个导航按钮会覆盖第一个导航按钮的行为,并且尽管单击第一个导航按钮,其内容仍然存在再次。
我的期望是菜单按钮需要充当真正的切换开关,仅显示相关内容,而不显示所有其他菜单内容 div。
下面是导航的标记及其相关内容 div:
<div class="filter-bar pull-left">
<ul class="">
<li><!-- NAV ITEM 1 -->
<button type="button"
id="left-nav-toggle-menu"
class="left-nav-toggle mnc-filter-icn"
title="menu">
<i class="fa fa-list-ul fa-fw"></i>
</button>
</li>
<li><!-- NAV ITEM 2 -->
<button type="button"
id="left-nav-toggle-filters"
class="left-nav-toggle mnc-filter-icn"
title="filters">
<i class="fa fa-filter fa-fw"></i>
</button>
</li>
</ul>
</div>
<div class="collapse push-menu-content"><!-- NAV ITEM 1 CONTENT -->
<div class="clearfix">
<button type="button"
class="close left-nav-pin pull-right"
aria-label="Pin">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
</div>
<div class="collapse push-filter-content"><!-- NAV ITEM 2 CONTENT -->
<div class="clearfix">
<button type="button"
class="close left-nav-pin pull-right"
aria-label="Pin">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<ul>
<li>Filter 1 Category</li>
<li>Filter 2 Category</li>
<li>Filter 3 Category</li>
</ul>
</div>
现在使用 js 函数来切换导航内容:
$(document).ready(function(){
$("button#left-nav-toggle-menu").click(function(){
$("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
$("div.collapse.push-filter-content").toggleClass("in");
});
});
就此而言,我不是 js 或 Bootstrap 专家,我只是使用 Bootstrap 文档(collapse 和toggleClass)来创建这些函数。我需要了解 Bootstrap 的人帮助修改它们,以便导航按钮能够使用 Bootstrap 和 jQuery 的内置功能作为内容的真正切换功能。
非常感谢任何帮助!
最佳答案
如果我理解正确,您想从任何打开的 div 中删除 .in
类:
$("button#left-nav-toggle-menu").click(function(){
$("div.collapse.push-filter-content").removeClass("in");
$("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
$("div.collapse.push-menu-content").removeClass("in");
$("div.collapse.push-filter-content").toggleClass("in");
});
关于javascript - Bootstrap 3 - 切换 - 2 个按钮,2 个元素 - 如何显示/隐藏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34904643/