如何实现jQuery简单下拉菜单点击同触发项时的收放切换？

你现有的下拉菜单只能点击展开，要实现点击同一触发项时关闭、再次点击又展开的效果，只需修改jQuery的点击事件逻辑即可，以下是调整后的完整代码：

修改后的JavaScript代码 #

$(".dropdown-toggle").on("click", function(e) {
  e.stopPropagation();
  // 获取当前触发项对应的下拉菜单
  const $currentMenu = $(this).siblings(".dropdown-menu");
  
  // 关闭其他所有已展开的下拉菜单（如果不需要同时只展开一个菜单，可删除此行）
  $(".dropdown-menu").not($currentMenu).removeClass("active");
  
  // 切换当前菜单的激活状态：展开变关闭，关闭变展开
  $currentMenu.toggleClass("active");
});

CSS代码（可保留原样式，可选添加过渡动画） #

.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);
    /* 可选：添加过渡动画让展开/关闭更平滑 */
    transition: visibility 0.2s, opacity 0.2s ease;
}

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

（可选：给.dropdown-menu加上transition属性，让显示/隐藏过程更流畅）

HTML代码（无需改动，保持原结构） #

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

逻辑说明 #

1. 定位当前菜单：点击触发项时，先找到它对应的下拉菜单元素
2. 管理其他菜单：如果需要保证同一时间只有一个菜单展开，就关闭除当前菜单外的所有激活菜单；若允许多个菜单同时展开，删除对应代码行即可
3. 切换状态：用toggleClass("active")替代原来的强制添加类，实现点击时的状态反转——菜单原本展开则关闭，原本关闭则展开

内容的提问来源于stack exchange，提问作者HiDayurie Dave