jQueryリストナビゲーション

Question

jQueryでナビゲーションバーを作成するにはいくつかの助けが必要です。JSフィドルをチェックすると、私が得ようとしている効果を理解する必要があります。私は、それはあなたが任意の助けすべての

Answer 1

まずため

乾杯を（私はサブリンクをクリックしたときに、それは上にスライドさせたくない）dublinkに押したとき、私は別に欲しいものやってあなたを持っていますClickイベントを子の最初の行にバインドするだけで、root ul内に存在するすべてのli要素にバインドするよう指定します。

第2に、li要素の最初の行（クリックイベントをバインドする場所）内に存在する子をクリックすると、クリックイベントがa要素にバインドされますその同じクリックイベントを引き起こします。これは、あなたが実際にその子供の1人を介してリをクリックしたという事実によるものです。

再書かれたコードのこの作品は、あなたが始めることができるかどうか見てみましょう：

http://jsfiddle.net/Ay6Xs/10/

（私も書き換え一部のHTMLをしたので、いくつかのコピーパスタを適用）

ここですjsfiddleからコード：

$(document).ready(function() 
{ 
    // hides all admin control elements (drop down) 
    $("#navigation_bar ul").hide(); 

    // Only bind click handler to direct li > a children 
    $("#navigation_bar > li > a").click(function(e) 
    { 
     // Slide up every single ul 
     $("#navigation_bar ul").slideUp(); 

     $(this).siblings() 
      .stop() 
      .slideToggle(); 

    }); 
}); 

HTML：

<ul id="navigation_bar"> 
    <li> 
     <a id="database" href="javascript:void(0)"> 
      <img class="icon" src="images/icon/homeico.png"/> 
      Dashboard 
     </a> 
     <ul> 
      <li> 
       <a href="#">> Inbox</a> 
      </li> 
      <li> 
       <a href="#">> Sent</a> 
      </li> 
      <li> 
       <a href="#">> Search</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a id="database" href="#"> 
      <img class="icon" src="images/icon/mailico.png"/> 
      Messages 
     </a> 
     <ul> 
      <li> 
       <a href="#">> Inbox</a> 
      </li> 
      <li> 
       <a href="#">> Sent</a> 
      </li> 
      <li> 
       <a href="#">> Search</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a id="database" href="#"> 
      <img class="icon" src="images/icon/homeico.png"/> 
      Dashboard 
     </a> 
     <ul> 
      <li> 
       <a href="#">> Inbox</a> 
      </li> 
      <li> 
       <a href="#">> Sent</a> 
      </li> 
      <li> 
       <a href="#">> Search</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a id="database" href="#"> 
      <img class="icon" src="images/icon/mailico.png"/> 
      Messages 
     </a> 
     <ul> 
      <li> 
       <a href="#">> Inbox</a> 
      </li> 
      <li> 
       <a href="#">> Sent</a> 
      </li> 
      <li> 
       <a href="#">> Search</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a id="database" href="#"> 
      <img class="icon" src="images/icon/homeico.png"/> 
      Dashboard 
     </a> 
     <ul> 
      <li> 
       <a href="#">> Inbox</a> 
      </li> 
      <li> 
       <a href="#">> Sent</a> 
      </li> 
      <li> 
       <a href="#">> Search</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a id="database" href="#"> 
      <img class="icon" src="images/icon/mailico.png"/> 
      Messages 
     </a> 
     <ul> 
      <li> 
       <a href="#">> Inbox</a> 
      </li> 
      <li> 
       <a href="#">> Sent</a> 
      </li> 
      <li> 
       <a href="#">> Search</a> 
      </li> 
     </ul> 
    </li> 
</ul>