[英]Toggle font-awesome images too
我有以下導航欄:
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-pills nav-stacked" id="menu">
<li class="active" onclick="showMainDivision('legislate','bills','committees','favourites')">
<a ng-click="getLegislators()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
</li>
<li onclick="showMainDivision('bills','legislate','committees','favourites')" >
<a ng-click="getActiveBill()"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-file-o fa-stack-1x "></i></span>Bills</a>
</li>
<li onclick="showMainDivision('committees','bills','legislate','favourites')" >
<a ng-click="getCommittees()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-sign-in fa-stack-1x "></i></span>Committees</a>
</li>
<li onclick="showMainDivision('favourites','committees','bills','legislate');">
<a ng-click="getFavourites()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-star-o fa-stack-1x "></i></span>Favourites</a>
</li>
</ul>
</div>
我有以下切換按鈕:-
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>
</li>
</ul>
</div>
在按鈕上單擊我具有以下javascript函數:-
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
關鍵是撥動開關工作正常,但撥動開關只是隱藏了i標記下的超棒圖像仍然可見的li項目。 我希望它們也與它們各自的li項一起消失,並且在切換回它們時應該顯示回來。 我對此很陌生,不勝感激。
沒有id="wrapper"
元素。我也嘗試隱藏菜單,在菜單下沒有ul,它是同一級別。 $('#menu').hide();
您以錯誤的方式使用了Bootstrap崩潰,您應該依靠它的內置崩潰功能使用以下引用: http : //getbootstrap.com/javascript/#collapse
簡而言之,您不需要自己編寫任何JS,只需更改以下內容:
<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2" href="#sidebar-wrapper" aria-expanded="false" aria-controls="sidebar-wrapper">> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>
和
<div id="sidebar-wrapper" class="collapse">
我假設您要隱藏整個側邊欄包裝,如果不是這種情況,則將其應用於
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.