Question

我正在制作一个简单的手风琴式垂直菜单：

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

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

但是，如果您单击一行中的两个或多个链接，则会打开所有子菜单。

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

对于专业的建议，我将不胜感激。

Answer 1

查看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的关闭。

jQuery：关闭什么是打开，打开什么是关闭的

1 个答案: