如何關閉上一個打開的子菜單點擊下一個子菜單點擊事件

我有一個菜單子菜單。我必須打開一個下拉菜單，單擊時再點擊其他菜單時關閉。如果我點擊菜單，我的下面的代碼都是下拉菜單。我一次只能顯示一個下拉菜單。你能幫我嗎？如何關閉上一個打開的子菜單點擊下一個子菜單點擊事件

注意在第二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

如何關閉上一個打開的子菜單點擊下一個子菜單點擊事件

回答

相關問題