Bootstrap4下拉菜单仅在第二次点击时生效问题排查

嘿，我一眼就发现问题出在哪了！你的下拉菜单<li>标签里多了个show类，这就是导致第一次点击没反应、第二次才展开的元凶。

问题原因 #

在Bootstrap 4中，show类是用来标记下拉菜单已展开的状态类，它是由Bootstrap的JS自动添加和移除的。你一开始就给<li>加上了这个类，JS初始化时会认为菜单已经处于展开状态，所以第一次点击其实是触发了“收起”操作（但此时菜单本来就没展开，所以看不到变化），第二次点击才会触发“展开”操作，也就出现了你遇到的异常。

修正后的代码 #

把<li>里的show类删掉就可以了，修改后的代码如下：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown Toggler
  </a>
  <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item">Link 1</a>
    <a class="dropdown-item">Link 2</a>
  </div>
</li>

额外注意事项 #

• 确保你正确引入了Bootstrap 4的依赖文件，顺序不能错：jQuery → Popper.js → Bootstrap JS，缺少任何一个或者顺序不对都可能导致下拉组件失效。
• 不要手动给下拉相关元素添加show或者aria-expanded="true"这类状态属性，这些都应该由Bootstrap的JS来自动管理，手动干预很容易引发状态冲突。

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