代码之家 › 专栏 › 技术社区 › HiDayurie Dave

单击同一个下拉菜单时,jQuery简单下拉菜单需要关闭

css jquery html javascript

HiDayurie Dave · 技术社区 · 9 月前

我有一个简单的jquery下拉列表,代码如下。它工作正常。当我点击菜单,例如:项目,然后会显示下拉列表。现在,当我再次单击项目时,我需要关闭下拉列表,然后如果我再次单击,它将显示下拉列表。有办法做到这一点吗?

$(".dropdown-toggle").on("click", function(e) {
  e.stopPropagation();

  $(".dropdown-menu").removeClass("active");
  $(this).siblings(".dropdown-menu").addClass("active");
});

.dropdown-menu {
    min-width: 10rem;
    margin-top: 10px;
    background: #ffffff;
    border-radius: .25rem;
    padding: .5rem 0;
    visibility: hidden;
    opacity: 0;
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

.dropdown-menu.active {
  visibility: visible;
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    <a class="dropdown-toggle" id="projects">Projects</a>

    <div class="dropdown-menu anim-1" data-target="projects">
      <a class="dropdown-item" href="#">ABC</a>
      <a class="dropdown-item" href="#">DEF</a>
    </div>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" id="products">Products</a>

    <div class="dropdown-menu anim-1" data-target="products">
      <a class="dropdown-item" href="#">GHI</a>
      <a class="dropdown-item" href="#">JKL</a>
      <a class="dropdown-item" href="#">MNO</a>
    </div>
  </li>
</ul>

2 回复 | 直到 9 月前

Shuo 9 月前

过滤 $(".dropdown-menu") 删除之前 .active

$(".dropdown-menu").not(menu).removeClass("active");

$(".dropdown-toggle").on("click", function (e) {
  e.stopPropagation();

  const menu = $(this).siblings(".dropdown-menu");
  $(".dropdown-menu").not(menu).removeClass("active");
  menu.toggleClass("active");
});

.dropdown-menu {
    min-width: 10rem;
    margin-top: 10px;
    background: #ffffff;
    border-radius: .25rem;
    padding: .5rem 0;
    visibility: hidden;
    opacity: 0;
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

.dropdown-menu.active {
  visibility: visible;
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    <a class="dropdown-toggle" id="projects">Projects</a>

    <div class="dropdown-menu anim-1" data-target="projects">
      <a class="dropdown-item" href="#">ABC</a>
      <a class="dropdown-item" href="#">DEF</a>
    </div>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" id="products">Products</a>

    <div class="dropdown-menu anim-1" data-target="products">
      <a class="dropdown-item" href="#">GHI</a>
      <a class="dropdown-item" href="#">JKL</a>
      <a class="dropdown-item" href="#">MNO</a>
    </div>
  </li>
</ul>

Emerge2001 9 月前

如果您使用jQuery,最简单的选择是使用toggleClass(),它将根据“活动”类的存在来添加或删除它。

https://www.w3schools.com/jquery/html_toggleclass.asp