当我点击打开时,它会切换所有子菜单。我想仅切换ul
下的确切li
。
$(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>
&#13;
答案 0 :(得分:2)
您可以通过将find()
更改为children()
来仅定位li
的直接子女来实现此目的。
$(document).ready(function(){
$(".has-children>a").click(function(event){
event.preventDefault();
});
$('.has-children').click(function() {
$(this).children('ul').toggle(300);
});
});
&#13;
<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>
&#13;
然而,这会导致点击儿童的孩子关闭菜单的问题,因此您可以使用a
标记和jQuery next()
功能来切换而不是children()
或{ {1}}像这样:
find()
&#13;
$(document).ready(function() {
$(".has-children>a").click(function(event) {
event.preventDefault();
$(this).next().toggle(300);
});
});
&#13;
这也使你的脚本更短。