jQuery和選擇下一個列表項目對象

Question

我有一個列表和子導航內建父列表內建的導航。子導航駐留在一個表項，以它對應的主要資產淨值鏈接：

這坐落在一個div「導航」

<ul> 
<li><a href="#">Nav main 1</a></li> 
<li> 
    <ul> 
     <li>sub 1</li> 
     <li>sub 2</li> 
     <li>sub 3</li> 
     <li>sub 4</li> 
    </ul> 
</li> 
<li><a href="#">Nav main 2</a></li> 
<li> 
    <ul> 
     <li>sub 1</li> 
     <li>sub 2</li> 
     <li>sub 3</li> 
     <li>sub 4</li> 
    </ul> 
</li> 
</ul> 

目前的ID，我有以下的jQuery：

$(document).ready(function() { 
$("#nav ul li a[href^='#']").each(function(){ 
    if ($(this).next().is(':visible')) { 
      $(this).next().hide(); 
} else { 
$("#nav ul li a[href^='#']").each(function(){ 
$(this).next().hide(); 
}); 

$(this).next().show(); 
} 
}); 

我認爲這將工作，使所有的子菜單的隱藏，然後顯示一個已被點擊。由於某種原因沒有發生。我檢查了控制檯（螢火蟲），並沒有顯示錯誤。

現在感到沮喪了！ ： -/

編輯：這裏是答案：

$(document).ready(function() { 
$("#nav ul li a[href^='#']").each(function(){ 
$(this).parent().next().hide(); 
    $(this).click(function() { 

     if ($(this).parent().next().is(':visible')) { 
      $(this).parent().next().hide(); 

     } else { 
      $("#nav ul li a[href^='#']").each(function(){ 
      $(this).parent().next().hide(); 

     }); 
     //then reshow and label the clicked nav 
     $(this).parent().next().show(); 
     } 

    }); 
    }); 

}); 

Answer 1

HTML：

<div id="nav"> 
    <ul> 
     <li> 
      <a href="#">Nav main 1</a> 
      <ul> 
       <li>sub 1</li> 
       <li>sub 2</li> 
       <li>sub 3</li> 
       <li>sub 4</li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Nav main 2</a> 
      <ul> 
       <li>sub 1</li> 
       <li>sub 2</li> 
       <li>sub 3</li> 
       <li>sub 4</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

的JavaScript：

var s = $('#nav ul ul').hide(); 

$('#nav a').click(function() { 
    var u = $(this).next(); 

    u.is(':visible') ? u.hide() : (s.hide(), u.show());  
    return false; 
}); 

現場演示：http://jsfiddle.net/Tq6LM/1/

Answer 2

沒關係......我已經想通了。再寫出來一定有幫助。我需要調用.parent（） 似乎我試圖調用下一個href，我需要調用下一個列表！

Answer 3

• DEMO：http://so.devilmaycode.it/jquery-and-selecting-the-next-list-items-objects

您Javascript代碼應該是：

$(function() { 
    $('#main-nav li').click(function(e) { 
     e.preventDefault(); 
     $('#main-nav li ul').slideUp(500); 
     $(this).find('ul:not(:visible)').slideDown(500); 
    }); 
}); 

點點CSS

#main-nav li ul { display:none } 

您HTML應該是這樣的：

<ul id="main-nav"> 
<li><a href="#">Nav main 1</a> 
    <ul> 
     <li>sub 1</li> 
     <li>sub 2</li> 
     <li>sub 3</li> 
     <li>sub 4</li> 
    </ul> 
</li> 
<li><a href="#">Nav main 2</a> 
    <ul> 
     <li>sub 1</li> 
     <li>sub 2</li> 
     <li>sub 3</li> 
     <li>sub 4</li> 
    </ul> 
</li> 
</ul>