我正在开发一个简单的类似 Accordion 的垂直菜单:
单击“我们的解决方案”、“产品覆盖范围”、“我们的团队”或“联系我们”可打开或关闭子菜单。
但是，如果您连续单击其中两个或多个链接，所有子菜单都会打开。
我希望第一次单击任何菜单项即可打开其子菜单并关闭当前打开的子菜单。第二次单击应该只是关闭所单击链接的子菜单。
如果您能提供专业建议，我将不胜感激。
最佳答案
查看 jQuery :visible 选择器。在单击事件中，向上滑动已可见的那个，然后向下滑动要打开的那个。
编辑:这是我过去用来执行此操作的代码片段。请注意，我使用定义列表(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>
说明:我使用了跨度，以便只有每个项目的文本才会触发 Accordion 行为。当单击一个跨度时，我们说 $(this).next() 来到达内部 ul。如果你不使用span并且将点击处理程序附加到外部li，那么在子菜单内点击将触发外部li的关闭。
关于jQuery:关闭打开的内容，打开关闭的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6632339/