如何点击.title时找到最近.cat-dropdown-menu实现单下拉菜单触发？

看起来你遇到的核心问题是原代码会操作页面上所有的下拉菜单，而不是当前点击标题对应的那一个，导致无法实现“同一时间仅一个菜单展开”的需求。我来帮你调整代码，精准控制单个菜单的展开/收起，同时保证排他性：

修改后的完整代码 #

$(".cat-dropdown .title").click(function() {
  // 精准定位当前点击标题对应的下拉菜单
  const $currentDropdown = $(this).closest('.cat-dropdown');
  const $currentMenu = $currentDropdown.find('.cat-dropdown-menu');
  
  // 先关闭所有其他已展开的下拉菜单（排他逻辑）
  $('.cat-dropdown').not($currentDropdown).each(function() {
    const $otherMenu = $(this).find('.cat-dropdown-menu');
    if ($otherMenu.height() > 0) {
      closeMenu($(this).find('.title')[0]);
    }
  });
  
  // 处理当前菜单的展开/收起
  if ($currentMenu.height() > 0) {
    closeMenu(this);
  } else {
    openMenu(this);
  }
});

// 调整closeMenu函数，确保操作的是当前触发元素对应的菜单
function closeMenu(trigger) {
  const $targetMenu = $(trigger).closest('.cat-dropdown').find('.cat-dropdown-menu');
  // 这里保留你原有的收起逻辑，比如设置高度为0
  $targetMenu.height(0);
  // 可选：添加状态类标记，方便CSS控制样式
  $(trigger).closest('.cat-dropdown').removeClass('menu-open');
}

// 调整openMenu函数，同理操作当前菜单
function openMenu(trigger) {
  const $targetMenu = $(trigger).closest('.cat-dropdown').find('.cat-dropdown-menu');
  const $list = $targetMenu.find('.cat-list');
  // 展开菜单，比如设置高度为列表的实际高度
  $targetMenu.height($list.outerHeight());
  // 可选：添加状态类标记
  $(trigger).closest('.cat-dropdown').addClass('menu-open');
}

关键逻辑解释 #

1. 精准定位当前菜单：
   用$(this).closest('.cat-dropdown')先找到当前点击标题所在的父容器，再通过.find('.cat-dropdown-menu')定位到对应的下拉菜单，彻底避免了原代码中操作所有菜单的问题。

2. 排他性控制：
   在处理当前菜单之前，先遍历所有其他下拉容器，关闭已经展开的菜单——用.not($currentDropdown)排除当前容器，确保不会影响正在操作的菜单。

3. 优化状态控制（可选）：
   我加入了menu-open类的操作，你可以配合CSS实现更平滑的展开/收起动画，比直接操作height更优雅：

   .cat-dropdown-menu {
     height: 0;
     overflow: hidden;
     transition: height 0.3s ease;
   }
   .cat-dropdown.menu-open .cat-dropdown-menu {
     height: auto;
   }
   

   这种情况下，openMenu和closeMenu函数只需要添加/移除类即可，不需要手动控制高度。

内容的提问来源于stack exchange，提问作者Kyle Underhill