скрыть другое выпадающее меню, нажав на другой пункт меню - PullRequest
Новая
       7

скрыть другое выпадающее меню, нажав на другой пункт меню

0 голосов
/ 29 января 2019

Я хочу скрыть другое раскрывающееся меню, когда оно открыто, и я нажимаю на другой пункт меню.

, но я не знаю, как это сделать, и мой код не работает.

это мой код jquery: 

$(".has-dropdown").click(function() {
  $(this).toggleClass("active");
  if ($(this).hasClass("active")) {
    $(this).children(".nav-dropdown").slideDown("fast");
  } else {
    $(this).children(".nav-dropdown").slideUp("fast");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="has-dropdown">
            <button>خودرو<i class="lnr lnr-chevron-down"></i></button>
            <span class="nav-dropdown">
                <a href="#">داشبورد</a>
                <a href="#">بدنه</a>
            </span>
</span>
<span class="has-dropdown">
            <button>آرایشی و بهداشتی<i class="lnr lnr-chevron-down"></i></button>
            <span class="nav-dropdown">
                <a href="#">لوازم بهداشتی</a>
            </span>
</span>
<span class="has-dropdown">
            <button>خانه و ساختمان<i class="lnr lnr-chevron-down"></i></button>
            <span class="nav-dropdown">
                <a href="#">شوینده های خانگی</a>
                <a href="#">کالای ساختمانی</a>
            </span>
</span>

1 Ответ

0 голосов
/ 29 января 2019

Вы можете сделать это так - комментарии в коде 

var $dropDownHolders = $(".has-dropdown"),                 // get all dropdown holders
  $dropDowns = $dropDownHolders.children(".nav-dropdown"); // get all dropdowns

$dropDownHolders.click(function() {
  var $this = $(this),                                     // get clicked dropdwon holder
    $thisDropDown = $this.children(".nav-dropdown");       // get clicked dropdown

  $this.toggleClass("active");                             // toggle your class
  if ($this.hasClass("active")) { 
    // current is active
    $dropDownHolders.not($this).removeClass('active');     // remove active class from all dropdowns holders but this
    $dropDowns.not($thisDropDown).slideUp("fast");         // slide up all dropdowns but this
    $thisDropDown.slideDown("fast");                       // slide down this dropdown
  } else {
    // current is inactive - should only happen if it was the current active class
    $thisDropDown.slideUp("fast");                         // slide up this dropdown if same button clicked
  }
});
.nav-dropdown {
  display: none;
}


/* optional */

.has-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
}

.nav-dropdown>a {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="has-dropdown">
    <button>خودرو<i class="lnr lnr-chevron-down"></i></button>
    <span class="nav-dropdown">
        <a href="#">داشبورد</a>
        <a href="#">بدنه</a>
    </span>
</span>
<span class="has-dropdown">
    <button>آرایشی و بهداشتی<i class="lnr lnr-chevron-down"></i></button>
    <span class="nav-dropdown">
        <a href="#">لوازم بهداشتی</a>
    </span>
</span>
<span class="has-dropdown">
    <button>خانه و ساختمان<i class="lnr lnr-chevron-down"></i></button>
    <span class="nav-dropdown">
        <a href="#">شوینده های خانگی</a>
        <a href="#">کالای ساختمانی</a>
    </span>
</span>
...