问题描述
我有一个简单的嵌套列表，如下所示：
<ul class='main'> <li class='mainlink'><a href='#'>Main 1</a> <ul class='sub'> <li><a href='#'>Sub 1-1</a> <li><a href='#'>Sub 1-2</a> <li><a href='#'>Sub 1-3</a> </ul> </li> <li class='mainlink'><a href='#'>Main 2</a> <ul class='sub'> <li><a href='#'>Sub 2-1</a> <li><a href='#'>Sub 2-2</a> <li><a href='#'>Sub 3-3</a> </ul> </li> <li class='mainlink'><a href='#'>Main 3</a> <ul class='sub'> <li><a href='#'>Sub 3-1</a> <li><a href='#'>Sub 3-2</a> <li><a href='#'>Sub 3-2</a> </ul> </li> </ul>
这是我的jQuery：
$( ".mainlink" ).click(function() {
var child = $(this).children('.sub');
var rest = $('.sub:visible').not(child);
child.slideToggle();
rest.slideUp();
});
单击.mainlink应打开其子列表.sub并关闭所有其他打开的子列表。
这部分按预期工作，但点击.mainlink与打开.sub关闭.sub并立即打开它，而不是保持关闭，直到下一次点击发生。
问题可能很容易解决，但我显然无法找到正确的方法。 谢谢你的帮助。
拉尔夫
1楼
尝试这个：
$(document).ready(function(){ $( ".mainlink > a" ).click(function() { $('.main .sub').not($(this)).slideUp(); var child = $(this).parent().children('.sub'); if(!child.is(":visible")){ child.slideDown(); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class='main'> <li class='mainlink'><a href='#'>Main 1</a> <ul class='sub' style='display:none'> <li><a href='#'>Sub 1-1</a> <li><a href='#'>Sub 1-2</a> <li><a href='#'>Sub 1-3</a> </ul> </li> <li class='mainlink'><a href='#'>Main 2</a> <ul class='sub' style='display:none'> <li><a href='#'>Sub 2-1</a> <li><a href='#'>Sub 2-2</a> <li><a href='#'>Sub 3-3</a> </ul> </li> <li class='mainlink'><a href='#'>Main 3</a> <ul class='sub' style='display:none'> <li><a href='#'>Sub 3-1</a> <li><a href='#'>Sub 3-2</a> <li><a href='#'>Sub 3-2</a> </ul> </li> </ul>
2楼
关闭所有.sub然后打开用户选择的.sub
演示
$(".mainlink a").on('click', function() { var subMenu = $(this).next('.sub'); $('.sub').slideUp(); if (subMenu.is(':visible')) { subMenu.slideUp(); } else { subMenu.slideDown(); } });
<ul class='main'> <li class='mainlink'> <a href='#'>Main 1</a> <ul class='sub' style='display:none'> <li><a href='#'>Sub 1-1</a></li> <li><a href='#'>Sub 1-2</a></li> <li><a href='#'>Sub 1-3</a></li> </ul> </li> <li class='mainlink'> <a href='#'>Main 2</a> <ul class='sub' style='display:none'> <li><a href='#'>Sub 2-1</a></li> <li><a href='#'>Sub 2-2</a></li> <li><a href='#'>Sub 3-3</a></li> </ul> </li> <li class='mainlink'> <a href='#'>Main 3</a> <ul class='sub' style='display:none'> <li><a href='#'>Sub 3-1</a></li> <li><a href='#'>Sub 3-2</a></li> <li><a href='#'>Sub 3-2</a></li> </ul> </li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>