javascript - 隐藏激活的子菜单(切换)

Question

我有一个很好用的代码 - 但是..我有 2 个子菜单。 当我单击 A 时，它可以正常打开，但是当我单击 B 时，A 不会关闭，所以我现在打开了 2 个子菜单。 我希望 B 在我单击 A 时关闭(如果它被单击)。

$(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>

Answer 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>