通过文本链接触发Bootstrap下拉菜单异常：ID正确却触发错误菜单

嘿，我刚碰到和你一模一样的离谱问题！点击带.dd类的文本链接时，控制台明明打印出了正确的目标ID（比如dropdownMenuButton2），但实际弹出来的却是第一个下拉菜单dropdownMenuButton1，折腾了好一会儿才找到原因。

先贴一下你的代码方便大家对照：

$('.dd').on('click', function (e) {
  e.stopPropagation();
  var id = $(this).attr('id');
  console.log('trying to trigger '+id);
  $('#'+id).dropdown('toggle');
});

你引入的是jQuery 3.2.1 Slim版，搭配Bootstrap的相关脚本。

问题根源 #

罪魁祸首就是jQuery Slim版本！Slim版为了轻量化砍掉了不少功能，其中就包括event.relatedTarget属性——而Bootstrap的下拉组件恰恰依赖这个属性来精准识别哪个元素触发了下拉操作。当你用$('#'+id).dropdown('toggle')调用时，Slim版jQuery没法正确传递触发源，Bootstrap就只能默认选中页面里的第一个下拉元素了。

两个快速解决办法 #

方法1：换成完整版jQuery

把你当前的Slim版jQuery替换成完整版，比如：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

完整版包含所有Bootstrap需要的核心模块，下拉组件就能正常识别触发元素了。

方法2：直接操作当前元素（不用换jQuery）

如果不想更换jQuery版本，修改你的点击事件代码，直接用当前点击的DOM元素调用dropdown方法，跳过通过ID重新查找的步骤：

$('.dd').on('click', function (e) {
  e.stopPropagation();
  var id = $(this).attr('id');
  console.log('trying to trigger '+id);
  // 直接用$(this)操作当前点击的元素
  $(this).dropdown('toggle');
});

这样绕开了jQuery Slim的限制，直接操作你点击的那个元素，自然就能触发对应的下拉菜单了。

亲测这两种方法都能解决问题，你可以试试！

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