如何在使用 Click 打开另一个菜单时关闭一个菜单？

Question

在我针对我的问题尝试了大多数其他相关搜索结果但没有任何效果后，我将尝试 post 我自己的问题。

这就像一个魅力，通过在网站主菜单中打开隐藏的子菜单来实现。问题是，如果我打开总共四个子菜单中的一个，然后再打开另一个，子菜单就会堆叠在一起。我只想一次打开一个菜单项的子菜单，这意味着如果我打开一个子菜单，之前打开的子菜单应该关闭。

jQuery(document).ready(function($) {
  $(".clickSlide > ul").hide();
  $(".clickSlide").click(function() {
    $(this).children("ul").stop(true, true).slideToggle("fast"),
      $(this).toggleClass("dropdown-active");
  });
});

<ul id="menu-sidhuvud-e-butik-vanster" class="menu">
  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

有什么建议吗？我是 JS 新手。

感谢您的指导。

Answer 1

您已经有了在代码中执行此操作的公式。您需要确保的是在未单击的所有其他元素上切换 .hide() 函数。

$(this).siblings().children("ul").hide("fast")

上面的代码正是这样做的。它选择所有兄弟姐妹并隐藏他们的 children 是 ul 标签。

jQuery(document).ready(function ($) {
  $(".clickSlide > ul").hide();
  $(".clickSlide").click(function () {
    $(this).siblings().children("ul").hide("fast")
    $(this).children("ul").stop(true, true).slideToggle("fast"),  
    $(this).toggleClass("dropdown-active");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-sidhuvud-e-butik-vanster" class="menu">

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

如何在使用 Click 打开另一个菜单时关闭一个菜单？

How can I close one menu when another is opened with Click?

javascript

menu

dropdown