jQuery list navigation

Question

我需要一些幫助，在jQuery中創建一個導航欄，如果你簽出JS小提琴，你應該明白我試圖得到什麼效果。我知道了做我想從什麼除了當你按下一個dublink（我不希望它向上滑動點擊子鏈路時）

乾杯任何幫助

Answer 1

首先，你只需要將click事件綁定到第一行子元素，在那裏你指定將它綁定到你的根ul中存在的所有li元素。其次，您可能希望將click事件綁定到a元素，因爲點擊第一行li元素（您希望點擊事件綁定到的位置）內存在的任何子元素將會觸發完全相同的點擊事件。這是因爲你實際上是通過它的一個孩子點擊了li。

讓我們看看這片重新編寫的代碼可以讓你開始：

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>