在单击事件上单击下一个子菜单时如何关闭上一个打开的子菜单答案

【问题标题】：How to close previous opened sub menu when clicked on next submenu on click event在单击事件上单击下一个子菜单时如何关闭上一个打开的子菜单
【发布时间】：2017-07-16 07:29:51
【问题描述】：

我有一个带有子菜单的菜单。我必须在单击时打开一个下拉菜单，然后在单击其他菜单时再次关闭。如果我单击菜单，我的以下代码都会显示下拉菜单。我一次只能显示一个下拉菜单。你会在这方面帮助我吗？

注意在第二个li 标签我使用div 标签

$('.sub-menu').hide();
   $("li:has(ul)").click(function(){
     $("ul",this).slideDown();
  });

.menu ul.nav-menu{
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="menu">
<ul class="nav-menu">
	
<li class="main-list"><a href="#">home</a>

	<ul class="sub-menu">
		<li><a href="#">home1</a></li>
		<li><a href="#">home2</a></li>
	</ul>
</li>

<li class="main-list"><a href="#">service</a>
  <div class="square">
	 <div class="sub">
		<ul class="sub-menu">
			<li><a href="#">home1</a></li>
			<li><a href="#">home2</a></li>
		</ul>
	  </div>
	</div>
</li>

</ul>
</div>

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

使用slideUp() 和slideDown()，如下所示：-

$('.sub-menu').hide();
$("li:has(ul)").click(function(){
  $(".main-list").find('.sub-menu').slideUp();
  $(this).find('.sub-menu').slideDown();
});

.menu ul.nav-menu{
	list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="menu">
   <ul class="nav-menu">
      <li class="main-list"><a href="#">home</a>
        <ul class="sub-menu">
          <li><a href="#">home1</a></li>
          <li><a href="#">home2</a></li>
        </ul>
      </li>
      <li class="main-list"><a href="#">service</a>
          <div class="square">
            <div class="sub">
              <ul class="sub-menu">
                  <li><a href="#">home1</a></li>
                  <li><a href="#">home2</a></li>
              </ul>
            </div>
        </div>
      </li>
    </ul>
</div>

【讨论】：

感谢 Anant 先生，非常适合我。从我这边投票
@NarendraVerma 感谢投票。也请标记它以使其成为您接受的答案。正如你所说，它非常适合你。
当然，我会在 7 分钟后接受。我还需要一个帮助，你能帮我写脚本吗，比如我必须点击菜单图标显示我所有的菜单和图标将变为关闭图标
@NarendraVerma 请将其作为一个新问题提出，并确保您也会得到帮助。谢谢
@AlivetoDie 嗨，我遇到了同样的问题，但框架是 angular5，我使用的是 Angular2-Material Mat-Menu。如何在其中实现相同的目标。

【解决方案2】：

在变量中跟踪上次打开的子菜单并在打开另一个菜单时将其关闭：

var lastOpen = null;
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
    if (lastOpen != null){
         lastOpen.hide();
         lastOpen = null;
    }
    lastOpen = $("ul",this).slideDown();
});

【讨论】：

这个解决方案非常适合我的目的。感谢发帖！

【解决方案3】：

根据点击的元素，显示相应的子菜单。

$('.sub-menu').hide();
$(".main-list").click(function() {
  $(".main-list").find('.sub-menu').hide();
  $(this).find('.sub-menu').fadeIn();
});

.menu ul.nav-menu {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="menu">
  <ul class="nav-menu">

    <li class="main-list"><a href="#">home</a>

      <ul class="sub-menu">
        <li><a href="#">home1</a></li>
        <li><a href="#">home2</a></li>
      </ul>
    </li>

    <li class="main-list"><a href="#">service</a>
      <div class="square">
        <div class="sub">
          <ul class="sub-menu">
            <li><a href="#">home1</a></li>
            <li><a href="#">home2</a></li>
          </ul>
        </div>
      </div>
    </li>

  </ul>
</div>

【讨论】：

感谢 Mr.Kind 用户，为我工作。从我身边投票
Mr.Kind 用户，原因只有 SlideUp 和 slideDown，您的脚本直接隐藏，接受的答案顺利隐藏。