当我单击“打开”时,它会切换所有子菜单。我只想切换 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>
最佳答案
您可以通过将 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>
这也会使您的脚本变得更短。
关于javascript - jQuery下拉菜单切换问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48336897/