如何为多个同class元素执行相同jQuery函数？子菜单仅首个生效问题

嘿，我遇到过好多次这种情况啦！大概率是你绑定事件的时候踩了选择器的坑，比如用了唯一ID或者只匹配到第一个元素。下面给你几个实用的解决办法：

1. 把ID选择器换成类选择器 #

如果之前你是这么写的（用ID绑定）：

$('#single-menu').click(function() {
  $('.submenu').toggle();
});

那问题就来了——ID在DOM里是唯一的，jQuery只会选中第一个匹配的元素。你应该给所有主菜单加个统一的类，比如menu-parent，然后用类选择器绑定：

$('.menu-parent').click(function() {
  // 重点用$(this)！只操作当前点击的菜单下的子菜单
  $(this).find('.submenu').toggle();
});

这样每个带menu-parent类的菜单都会响应点击，而且不会影响其他菜单的子菜单。

2. 动态菜单用事件委托 #

要是你的菜单是后来通过AJAX或者JS动态生成的，直接绑定事件会失效，这时候得用事件委托：

// 找一个页面加载时就存在的父容器，比如#menu-wrapper
$('#menu-wrapper').on('click', '.menu-parent', function() {
  $(this).find('.submenu').slideToggle();
});

原理是把事件绑定到父元素上，监听子元素的点击，不管子元素是一开始就有还是后来加的，都能触发。

3. 检查DOM结构：别重复用ID！ #

先看看你的HTML，两个菜单千万别用同一个ID，比如不能都写<div id="main-menu">，ID必须是唯一的。要么改成不同的ID（比如menu-1、menu-2），要么直接用类，后者更方便统一处理。

给你个完整的示例参考：

<!-- HTML结构 -->
<div id="menu-wrapper">
  <div class="menu-parent">
    首页菜单
    <ul class="submenu">
      <li>子项1</li>
      <li>子项2</li>
    </ul>
  </div>
  <div class="menu-parent">
    分类菜单
    <ul class="submenu">
      <li>分类1</li>
      <li>分类2</li>
    </ul>
  </div>
</div>

<script>
$(function() {
  $('.menu-parent').click(function() {
    // 切换当前子菜单
    $(this).find('.submenu').slideToggle();
    // 可选：点击一个菜单时关闭其他菜单的子菜单
    $('.menu-parent').not(this).find('.submenu').slideUp();
  });
});
</script>

另外别忘了给子菜单加display: none;的CSS，默认隐藏起来，这样toggle才有效果哦！

要是还没解决，把你的HTML和jQuery代码贴出来，我帮你再找找问题~

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