jQuery下拉菜单切换问题

Question

当我单击打开时，它将切换所有子菜单。 我只想切换li下的确切ul 。

 $(document).ready(function(){ $(".has-children>a").click(function(event){ event.preventDefault(); }); $('.has-children').click(function() { $(this).find('>ul').toggle(300); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li class="has-children"> <a href="#">open</a> <ul class="submenu" style="display:none"> <li class="has-children"> <a href="#">open</a> <ul class="submenu" style="display:none"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul> </li> </ul> 

Answer 1

您可以通过将find()更改为children()以仅将li直接子对象作为目标来实现。

 $(document).ready(function(){ $(".has-children>a").click(function(event){ event.preventDefault(); }); $('.has-children').click(function() { $(this).children('ul').toggle(300); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li class="has-children"> <a href="#">open</a> <ul class="submenu" style="display:none"> <li class="has-children"> <a href="#">open</a> <ul class="submenu" style="display:none"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul> </li> </ul> 

然而，这将导致这里点击孩子的孩子会关闭菜单的一个问题，所以不是你可以使用a标签和jQuery的next()函数来切换，而不是children()或find()是这样的：

 $(document).ready(function() { $(".has-children>a").click(function(event) { event.preventDefault(); $(this).next().toggle(300); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li class="has-children"> <a href="#">open</a> <ul class="submenu" style="display:none"> <li class="has-children"> <a href="#">open</a> <ul class="submenu" style="display:none"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul> </li> </ul> 

这也使您的脚本更短。