單擊父“ li”元素需要打開底圖“ ul”

Question

人，

我有一個問題，在解釋之前我將首先粘貼代碼。

 $(document).ready(function() { $a = $('ul li a'); $b = $('ul ul'); $a.on("click", function() { $b.slideToggle(500); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navigation"> <nav> <ul> <li><a href="#">Artists</a> </li> <ul> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> </ul> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> <li><a href="">Artists</a> </li> </ul> </nav> </div> 

我需要li來識別它是否具有ul ，如果需要則請對其進行slideToggle 。 當用ul單擊另一個li ，前一個下拉列表將關閉。

我完全不知道我將如何實現這一目標！

先感謝您 ！

Answer 1

我做了一些小改動。 我需要嵌套內部ul並簡化選擇器。 為了使它更好，您可以刪除錨標簽，然后單擊li至，這樣就不必遍歷父對象。

 $(document).ready(function() { $link = $('ul li a') $link.on("click", function() { $(this).parent().find('ul').slideToggle(500); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navigation"> <nav> <ul> <li><a href="#">Artists</a> <!-- I had to nest the ul inside the li --> <ul> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> </ul> </li> <li><a href="">Artists</a> <ul> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> </ul> </li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> </ul> </nav> </div> 

Answer 2

您可以按照以下步驟進行操作。

 $('#navigation ul li a').click(function(e) { e.preventDefault(); $('#navigation > nav > ul ul').slideUp(); $(this).next('ul').slideToggle(500); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navigation"> <nav> <ul> <li> <a href="#">Artists</a> <ul style="display:none;"> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> </ul> </li> <li> <a href="">Artists</a> <ul style="display:none;"> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> </ul> </li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> <li><a href="">Artists</a></li> </ul> </nav> </div>