jQuery：关闭打开的内容，打开关闭的内容

发布于 2024-11-19 02:42:02 字数 308 浏览 8 评论 0原文

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

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

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只涨不跌 2024-11-26 02:42:02

查看 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。如果您不使用span并将单击处理程序附加到外部li，则在子菜单内单击将触发外部li的关闭。

Check out the jQuery :visible selector. On the click event, slide up whichever one is already visible and slide down the one you want to open.

EDIT: Here's a code snippet I used in the past to do this. Note I am using definition lists (dl, dt, dd) instead of your unordered lists (ul and li), but you can adapt the code:

$("dt span").click(function () {
   var dd = $(this).parent().next();
    if (dd.is(":visible")) {
        dd.slideUp("slow");
    } else {
        $("dd:visible").slideUp("slow");
        dd.slideDown("slow");
    }
});

Hope this helps!

EDIT: Actual code as requested by the 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>

Explanation: I used spans so that only the text of each item triggers the accordion behavior. When a span is clicked on, we say $(this).next() to get to the inner ul. If you don't use spans and you attach the click handler to the outer li, then clicks inside the submenu will trigger the closing of the outer li.

回复收藏 0 原文

~没有更多了~