Question

我想隐藏另一个下拉菜单，当它打开时，我单击另一个菜单项。

但是我不知道该怎么做，我的代码也不起作用。

这是我的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>

Answer 1

您可以这样做-代码注释

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>

通过单击其他菜单项

1 个答案: