我正在开发一个类似手风琴的简单垂直菜单：
点击我们的解决方案、产品覆盖范围、我们的团队或联系我们打开或关闭子菜单。
但是，如果您连续单击两个或多个这些链接，所有子菜单都会打开。
我希望第一次单击任何菜单项以打开其子菜单并关闭当前打开的子菜单。第二次点击应该只是关闭被点击链接的子菜单。
我将不胜感激您的专业建议。
【问题讨论】：
标签： jquery animation slidetoggle slidedown slideup
查看 jQuery :visible 选择器。在 click 事件中，向上滑动已经可见的那个，然后向下滑动要打开的那个。
编辑：这是我过去用来执行此操作的代码 sn-p。请注意，我使用的是定义列表（dl、dt、dd）而不是无序列表（ul 和 li），但您可以调整代码：
$("dt span").click(function () {
var dd = $(this).parent().next();
if (dd.is(":visible")) {
dd.slideUp("slow");
} else {
$("dd:visible").slideUp("slow");
dd.slideDown("slow");
}
});
希望这会有所帮助！
编辑：OP 要求的实际代码：
<html>
<head>
<title>Accordion</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body>
<ul id="access">
<!-- Use spans so that only clicks on the item name are processed -->
<li><span class="item">Item 1</span>
<ul>
<li>Item 1 - A</li>
<li>Item 1 - B</li>
<li>Item 1 - C</li>
</ul>
</li>
<li><span class="item">Item 2</span>
<ul>
<li>Item 2 - A</li>
<li>Item 2 - B</li>
<li>Item 2 - C</li>
</ul>
</li>
<li><span class="item">Item 3</span>
<ul>
<li>Item 3 - A</li>
<li>Item 3 - B</li>
<li>Item 3 - C</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
// All sections rolled up to start
$("ul#access ul").hide();
// Open or close as necessary
$("span.item").click(function () {
var ul = $(this).next();
if (ul.is(":visible")) {
ul.slideUp("slow");
} else {
$("ul#access ul:visible").slideUp("slow");
ul.slideDown("slow");
}
});
});
</script>
</body>
</html>
解释：我使用了跨度，以便只有每个项目的文本触发手风琴行为。单击跨度时，我们说 $(this).next() 以到达内部 ul。如果不使用 span 并且将点击处理程序附加到外 li，则在子菜单内单击将触发关闭外 li。
【讨论】：