當用戶打開一個DropDown關閉其他DropDownns

Question

我想當用戶單擊一下降所有其他打開DropDown得到關閉。我在谷歌尋找答案，但這不適合我的下拉列表，我知道這很簡單，但我無法這樣幫助我！

<div class="hh_drop_down"> 
<ul class="hh_main"> 

    <li class="hh_main_menu"> 
    <a href="javascript:void(0);" class="hh_sf">Chemicals</a> 
    <ul class="hh_inner"> 
     <li><a href="#">Additives/Boosters</a></li> 
     <li><a href="#">Anti-Allergen</a></li> 
     <li><a href="#">Concrete</a></li> 
    </ul> 
    </li> 

    <li class="hh_main_menu" > 
    <a class="hh_sf" href="#">Equipment</a> 
     <ul class="hh_inner"> 
     <li><a href="#">Deodorization</a></li> 
     <li><a href="#">Duct Cleaning Equipment</a></li> 
     <li><a href="#">Hard Surface</a></li> 
    </ul> 

    </li> 

    <li class="hh_main_menu" > 
    <a class="hh_sf" href="#">Accessories</a> 
     <ul class="hh_inner"> 
      <li><a href="#">Bonnets/Pads</a></li> 
      <li><a href="#">Brush/Rake/Sponge</a></li> 
     <li><a href="#">Carpet Rakes</a></li> 
     </ul> 
    </li> 

</ul> 
</div> 

和jQuery我正在使用本：

<script> 
$(document).ready(function(){ 
    $(".hh_main").on('click' , '.hh_sf' , function(event){ 
     event.preventDefault(); 
     if($(this).next().hasClass('hh_inner')) { 
     $(this).next().slideToggle(); 
    } 
    }); 
}); 
</script> 

Answer 1

試試這個：

HTML：

<div class="hh_drop_down"> 
    <ul class="hh_main"> 

     <li class="hh_main_menu"> 
      <a href="javascript:void(0);" class="hh_sf">Chemicals</a> 
      <ul class="hh_inner expanded"> 
       <li><a href="#">Additives/Boosters</a></li> 
       <li><a href="#">Anti-Allergen</a></li> 
       <li><a href="#">Concrete</a></li> 
      </ul> 
     </li> 

     <li class="hh_main_menu"> 
      <a class="hh_sf" href="#">Equipment</a> 
      <ul class="hh_inner expanded"> 
       <li><a href="#">Deodorization</a></li> 
       <li><a href="#">Duct Cleaning Equipment</a></li> 
       <li><a href="#">Hard Surface</a></li> 
      </ul> 

     </li> 

     <li class="hh_main_menu"> 
      <a class="hh_sf" href="#">Accessories</a> 
      <ul class="hh_inner expanded"> 
       <li><a href="#">Bonnets/Pads</a></li> 
       <li><a href="#">Brush/Rake/Sponge</a></li> 
       <li><a href="#">Carpet Rakes</a></li> 
      </ul> 
     </li> 

    </ul> 
</div> 

JQuery的：

<script> 
    $(document).ready(function() { 
     $(".hh_sf").next().addClass("collapsed").slideUp(); 

     $(".hh_main").on('click', '.hh_sf', function (event) { 
      event.preventDefault(); 
      var currentClass = $(this).next().prop('class'); 
      if (currentClass == "hh_inner expanded") { 
       $(this).next().removeClass("expanded"); 
       $(this).next().addClass("collapsed"); 
       $(this).next().slideUp(); 
      } else { 
       $(".expanded").slideUp().addClass("collapsed").removeClass("expanded"); 

       $(this).next().removeClass("collapsed"); 
       $(this).next().addClass("expanded"); 
       $(this).next().slideDown(); 
      } 

     }); 
    }); 
</script> 

JsFiddle