Когда пользователь открывает один DropDown Закрыть другие DropDowns

Question

Когда пользователь открывает один DropDown Закрыть другие DropDowns

0

Я хочу, когда пользователь нажмет на один DropDown Все остальные открытые DropDown Get Closed. Я искал ответ в google, но это не работает для моего раскрывающегося списка. Я знаю, что это просто, но я не могу это помочь мне!

<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>

user3226792 14 март 2014, в 06:49

Источник

Теги:

javascript

jquery

html

css

drop-down-menu

1 ответ

Ещё вопросы

111 · Accepted Answer · 2014-03-14T03-53-00.000Z

Попробуй это:

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 ссылку два раза, она не закрывается !! Пожалуйста, помогите мне :)
Я не знаю, что именно вы хотите сделать, показывать все li как развернутые, когда они загружены, или только один как развернутые. Может быть, таким образом, может помочь вам достичь ваших требований
Отредактировал код, чтобы сдвинуть вверх все выпадающие списки в начале и добавил Fiddle.