点击表格任意行仅显示首行下拉菜单的问题修复咨询

这问题我之前也碰到过！核心原因很简单：你在PHP循环里给所有下拉菜单用了同一个ID this，而HTML规范里ID必须是页面唯一的——浏览器在查找ID时只会返回第一个匹配的元素，所以不管你点哪一行的按钮，JS都只会操作第一行的下拉菜单。

下面是具体的修复步骤：

1. 移除重复的ID，改用类名定位 #

把循环生成的下拉菜单的id="this"删掉，只保留类名就行（本来就有dropdown-menu类，足够用来定位了）：

<!-- PHP循环生成的表格行代码 -->
<tr>
  <td>
    <ul class="icons-list">
      <li class="dropdown">
        <a href="#" class="here">Click me</a>
        <!-- 去掉重复ID，保留类名 -->
        <ul class="dropdown-menu dropdown-menu-right">
          <li><input type="submit" value="Edit"></li>
        </ul>
      </li>
    </ul>
  </td>
</tr>

2. 调整JS事件处理，用相对选择器定位当前行的下拉菜单 #

你原来的JS事件绑定语法也有点小问题（多传了'tr'参数），而且不能再用ID查找。改成通过当前点击的元素去遍历DOM，找到对应的下拉菜单：

$('#table tbody').on('click', '.here', function (e) {
  e.preventDefault(); // 阻止a标签默认的跳转行为
  // 从当前点击的.here元素出发，找到它所在的dropdown容器，再定位下拉菜单
  $(this).closest('li.dropdown').find('.dropdown-menu').toggle();
});

代码解释： #

• e.preventDefault()：避免点击<a>标签时页面跳转到顶部（因为href是#）。
• $(this).closest('li.dropdown')：向上查找最近的li.dropdown父元素，确保只针对当前行的下拉容器。
• .find('.dropdown-menu')：在这个容器里找到对应的下拉菜单，然后执行toggle()显示/隐藏。

这样修改后，不管你点击哪一行的Click me按钮，只会切换当前行的下拉菜单，不会再影响其他行啦！

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