1

我正在开发一个简单的类似手风琴的垂直菜单：

http://www.cybart.com/bscg/

单击我们的解决方案、产品覆盖范围、我们的团队或联系我们打开或关闭子菜单。

但是，如果您连续单击两个或多个这些链接，所有子菜单都会打开。

我希望第一次单击任何菜单项以打开其子菜单并关闭当前打开的子菜单。第二次点击应该只是关闭被点击链接的子菜单。

我将不胜感激专家的建议。

4

1 回答 1

3

查看 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>

说明：我使用了跨度，以便只有每个项目的文本触发手风琴行为。单击跨度时，我们说 $(this).next() 以到达内部 ul。如果您不使用跨度并且将单击处理程序附加到外部 li，则在子菜单内单击将触发外部 li 的关闭。

于 2011-07-09T02:43:02.953 回答