jQuery点击仅触发指定子元素问题：多子菜单展开异常排查

我太懂这种尴尬了——本来只想展开当前点击/hover的父菜单对应的子菜单，结果所有.submenu都跟着凑热闹动起来，完全不符合预期对吧？这问题十有八九是你没精准定位到触发事件的父元素下的特定子菜单，之前的选择器写法可能没抓对层级关系。

先给你一套能直接用的完整方案，包含HTML、CSS和修正后的jQuery代码：

1. 基础HTML结构（确保层级清晰） #

<nav class="main-nav">
  <ul>
    <li class="menu-item">
      父菜单1
      <div class="submenu">
        <p>子菜单选项1</p>
        <p>子菜单选项2</p>
      </div>
    </li>
    <li class="menu-item">
      父菜单2
      <div class="submenu">
        <p>子菜单选项A</p>
        <p>子菜单选项B</p>
      </div>
    </li>
  </ul>
</nav>

2. 符合需求的CSS样式 #

实现初始height:0、hover时显示边框线的效果：

.submenu {
  height: 0;
  overflow: hidden; /* 隐藏超出的子菜单内容 */
  border-bottom: 1px solid transparent; /* 初始透明边框，hover时显示 */
  transition: border-color 0.3s ease;
  margin-top: 8px;
}

/* hover父菜单时，子菜单显示边框线 */
.menu-item:hover .submenu {
  border-bottom-color: #222;
}

3. 修正后的jQuery代码（精准定位目标子菜单） #

核心是用$(this)获取当前点击的父元素，再通过find()锁定它下面的.submenu，而不是全局选中所有.submenu：

$(document).ready(function() {
  $('.menu-item').on('click', function() {
    // 只获取当前点击的父菜单下的子菜单
    const $currentSubmenu = $(this).find('.submenu');
    
    // 切换展开/收起状态（可选，根据需求调整）
    if ($currentSubmenu.height() === 0) {
      // 如果子菜单高度不固定，可以用scrollHeight获取自然高度，更灵活
      const naturalHeight = $currentSubmenu[0].scrollHeight;
      $currentSubmenu.animate({ height: naturalHeight }, 300);
    } else {
      $currentSubmenu.animate({ height: 0 }, 300);
    }

    // 可选：点击新菜单时，自动关闭其他已展开的子菜单
    $('.submenu').not($currentSubmenu).animate({ height: 0 }, 300);
  });
});

为什么你之前的方法没生效？ #

• 如果你直接写$('.submenu').animate(...)，会全局选中所有带这个类的元素，自然全部动起来；
• 用children('.submenu')的话，要求.submenu是.menu-item的直属子元素，如果你的HTML里嵌套了其他标签（比如<span>包裹父菜单文字），children()就找不到目标；
• 用nth-child(2)的话，得确保每个.menu-item下的.submenu确实是第二个子元素，要是中间多了其他元素，这个选择器就会选错对象。

额外小建议 #

• 可以给展开的子菜单加个.active类，方便后续样式控制，也能更直观判断状态；
• 如果不需要点击切换，只想hover展开，把click事件改成mouseenter即可，但注意移动端hover体验不好，建议保留点击逻辑。

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