如何使用next（）在jQuery中查找最接近的ul？

Question

我有一個簡單的菜單，這樣的事情：

<ul id="navigation"> 
    <li id="m_li"> 
     <div><span>+</span><a href="#" >myself</a></div> 
     <ul class="test" id="x_ul"> 
      <li id="li"> 
       <a href="#" >Pictures</a> 
      </li> 
      <li id="li"> 
       <a href="#" >Audio</a> 
      </li> 
     </ul> 
    </li> 
    <li id="profile_modeling_li"> 
     <div><span>+</span><a href="#" >friend</a></div> 
     <ul class="test" id="y_ul"> 
      <li id="li"> 
       <a href="#" >Pictures</a> 
      </li> 
      <li id="li"> 
       <a href="#" >Video</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

然後使用jQuery所以當我點擊+簽署UL下滑：

$("#navigation > li > div > span").click(function(){ 

    if(false == $(this).next('ul').is(':visible')) { 
     $('#accordion ul').slideUp(300); 
    } 
    $(this).next('ul').slideToggle(300); 
}); 

的問題是，$(this).next('ul')沒有按」 t似乎喜歡未來ul

任何想法我做錯了什麼？

Answer 1

使用

$(this).parent().next() 

代替

$(this).next(); 

，當然，可以通過一個選擇器（更簡單或更復雜的），其識別所期望的元素作爲參數：

$(this).parent().next('ul.test[id$="_ul]"'); 

Answer 2

.next/.prev穿過兄弟姐妹和ul不是跨度的孩子。您應該找到最接近的li並找到.test。

$(this).closest('li').find('ul.test') 

Answer 3

轉換

$(this).next('ul') 

到

$(this).parent().next('ul') 

您可以在這裏看到http://jsfiddle.net/PYqS2/