[英]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.