如何关闭上一个打开的子菜单点击下一个子菜单点击事件

我有一个菜单子菜单。我必须打开一个下拉菜单，单击时再点击其他菜单时关闭。如果我点击菜单，我的下面的代码都是下拉菜单。我一次只能显示一个下拉菜单。你能帮我吗？如何关闭上一个打开的子菜单点击下一个子菜单点击事件

注意在第二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"> 
 
\t 
 
<li class="main-list"><a href="#">home</a> 
 

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

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

 
</ul> 
 
</div>

来源

2017-02-25 Narendra Verma

使用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{ 
 
\t 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>

来源

2017-02-25 12:32:44

谢谢安南先生，为我完美工作。 Upvote从我身边 –

@NarendraVerma thhanks获得最高票数。请标记它也使它接受答案。正如你所说，这对你来说是完美的。 –

当然，7分钟后我会接受。一个更多的帮助，我需要你可以帮助我的脚本，我必须点击菜单图标显示我所有的菜单和图标将更改为关闭图标 –

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

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

来源

2017-02-25 12:29:02

感谢Mr.Kind用户，从我身边 –

Mr.Kind用户对me.Upvote工作，原因仅仅是效果基本show和了slideDown，你的脚本直接隐藏和接受的答案顺利藏匿。 –

跟踪的最后一个变量打开子菜单，关闭它，当你打开另一个菜单：

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

来源

2017-02-25 12:30:34 Psi

该解决方案适用于我的目的。感谢发布！ – Kinburn101

如何关闭上一个打开的子菜单点击下一个子菜单点击事件

回答

相关问题