隐藏激活的子菜单（切换）答案

【问题标题】：Hide activated submenu (toggle)隐藏激活的子菜单（切换）
【发布时间】：2018-03-07 14:30:29
【问题描述】：

我有一个很好的代码 - 但是.. 我有 2 个子菜单。当我单击 A 时，它打开得很好，但是当我单击 B 时，A 没有关闭，所以我现在打开了 2 个子菜单。当我点击 A 时，我希望 B 关闭（如果它被点击）。

$(document).ready(function() {
  $('.submenu').hide();
  $("li:has(ul)").click(function() {
    $("ul", this).toggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="link">Menu</a></li>
  <li><a href="link">Menu</a></li>
  <li>
    <ul class="submenu">
      <li><a href="link">Menu</a></li>
      <li><a href="link">Menu</a></li>
    </ul>
  </li>
  <li>
    <ul class="submenu">
      <li><a href="link">Menu</a></li>
      <li><a href="link">Menu</a></li>
    </ul>
  </li>
  <li><a href="link">Menu</a></li>
</ul>

【问题讨论】：

我认为这可以帮助你：codepen.io/brenden/pen/Kwbpyj

标签： javascript jquery html css menu

【解决方案1】：

在您的点击事件中添加$('.submenu').hide();：

$(document).ready(function() {
    $('.submenu').hide();
    $("li:has(ul)").click(function() {
    		$('.submenu').hide();
        $("ul", this).toggle('slow');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
    <li>
        <ul class="submenu">
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
        </ul>
    </li>
    <li>
        <ul class="submenu">
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
        </ul>
    </li>
    <li><a href="#">Menu</a></li>
</ul>

【讨论】：

【解决方案2】：

在点击函数中添加$('ul li:has(ul)').not(this).find('.submenu:visible').toggle('slow');。

$(document).ready(function() {
  $('.submenu').hide();
  $("li:has(ul)").click(function() {
    $('ul li:has(ul)').not(this).find('.submenu:visible').toggle('slow');
    $("ul", this).toggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="link">Menu</a></li>
  <li><a href="link">Menu</a></li>
  <li>A
    <ul class="submenu">
      <li><a href="link">Menu</a></li>
      <li><a href="link">Menu</a></li>
    </ul>
  </li>
  <li>B
    <ul class="submenu">
      <li><a href="link">Menu</a></li>
      <li><a href="link">Menu</a></li>
    </ul>
  </li>
  <li><a href="link">Menu</a></li>
</ul>

【讨论】：

【解决方案3】：

你可以使用：

$(this).siblings().children(".submenu:visible").toggle('slow');

像这样：

$(document).ready(function() {
  $('.submenu').hide();
  $("li:has(ul)").click(function() {
    $(this).siblings().children(".submenu:visible").toggle('slow');
    $("ul", this).toggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu</a></li>
  <li>A
    <ul class="submenu">
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
    </ul>
  </li>
  <li>B
    <ul class="submenu">
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
    </ul>
  </li>
  <li><a href="#">Menu</a></li>
</ul>

【讨论】：