クリックイベントで次のサブメニューをクリックすると、前回開いたサブメニューを閉じる方法

Question

サブメニュー付きのメニューが1つあります。クリックするとドロップダウンメニューを開く必要があり、他のメニューをクリックすると再び閉じます。私の下のコードは、私がメニューをクリックした場合に表示されるドロップダウンです。私は一度に1つのドロップダウンだけを表示しなければならない。これで私を助けてくれますか？

第liタグに注意 Iがクリックされた素子によれば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>

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

Answer 2

を使用しています、それは、対応するサブメニューを示します。

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

Answer 3

変数にサブメニューを開いて、最後のトラックを保ち、あなたは別のメニュー開いたときに、それを閉じます。以下のように

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