当用户打开一个下拉菜单时关闭其他下拉菜单

Question

我希望当用户单击一个 DropDown 所有其他打开 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

Answer 2

我用显示和隐藏打开了下拉菜单，并在 li 上创建了事件，你可以使用不同的方式

试试这个：

jQuery :

$(".hh_main_menu").click(
    function(){
        $(this).next(".hh_inner").toggle();
        if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
        {
            $(this).siblings(".hh_main_menu").children(".hh_inner").hide();
        }
    } );