2016-11-04 6 views
-1

私は、次のナビゲーション・バーがあります: -トグルフォント素晴らしい画像あまりに

<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(); 
}); 

事がトグルが正常に動作しているが、トグルはちょうど私の下のli項目フォント素晴らしい画像を隠していますタグはまだ表示されています。私は彼らも彼らのそれぞれの李アイテムと一緒に行って欲しいと彼らは戻って切り替えるときに表示される必要があります。私はかなりこれはすべての助けに感謝している新しいです。

+2

コードのデモを提供できますか?私は '#menu'要素の下に' ul'を見ません。 '#menu'要素はすでに' ul'です。 – DontVoteMeDown

+0

ULを隠し、子孫はまだ見えますか?また、そのセレクタでどのように物事が隠されているのかわからない。 – epascarello

+0

はいulはidメニューを持っていますが、ULは隠れていますが、子孫は隠れていません。 – Anirban

答えて

2

要素がありませんid="wrapper" また、私はメニューだけを隠そうとしていますが、メニューの下にulはありません。同じレベルです。 $('#menu').hide();

0

あなたは間違った方法でブートストラップ崩壊を使用している、あなたはその組み込みの折りたたみ機能 使用にこの参照文献傾くする必要がありますので、 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"> 

サイドバーのラッパー全体を隠したいと思っていましたが、そうでない場合は

関連する問題