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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在点击事件中添加<text> <paragraph/> First text <paragraph/> </text> <text> <paragraph/> Two text <paragraph/> </text> <text> <paragraph/> Three text <paragraph/> </text> <text> <paragraph/> Four text <paragraph/> </text> ：

＆＃13;

＆＃13;

$('.submenu').hide();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 3

您可以使用：

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

像这样：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;