[英]Bootstrap 3 - Toggle - 2 buttons, 2 elements - How to show/hide?
我正在构建一个布局模板,供开发人员使用Bootstrap 3.3.6集成到他们的AngularJS / Bootstrap应用程序中。 此布局具有左侧导航上下文菜单,该菜单在打开时会滑过主页内容的顶部,或者可以选择“固定”打开,然后将主要内容推向右侧。
导航本身是包含两个按钮的无序列表的形式。 这个想法是,当单击按钮时,子菜单内容的相关div切换为显示(使用引导程序“ collapse”和“ 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");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.