用户打开一个DropDown关闭其他DropDowns

I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!

我希望用户点击一个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>

And jquery i am using in this :

我正在使用的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>

1 个解决方案

#1

Try this:

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

1 个解决方案

#1

更多相关文章

随机推荐