Bootstrap 下拉菜单的行为不同答案

【问题标题】：Bootstrap dropdowns behaving differentlyBootstrap 下拉菜单的行为不同
【发布时间】：2022-01-14 17:32:31
【问题描述】：

请看这里：http://www.proalliance.com.mx/2021/about.html 我在导航中有两个下拉部分。

对于 About，它的行为如我所愿，在悬停时下降。但是对于保险，需要点击下拉。我不知道这种行为是从哪里来的。

【问题讨论】：

标签： twitter-bootstrap dropdown bootstrap-5

【解决方案1】：

您的 script.js 中包含的 javascript 代码似乎有误。有这样的代码：

// On hover
const dropdownCheck = document.querySelector('.dropdown');

if (dropdownCheck !== null) { 
    document.querySelector(".dropdown").addEventListener("mouseleave", toggleDropdown);
    document.querySelector(".dropdown").addEventListener("mouseover", toggleDropdown);

    // On click
    document.querySelector(".dropdown").addEventListener("click", (e) => {

在那个脚本中你正在使用 document.querySelector。基于该方法的documentation，它说：

Document 方法 querySelector() 返回其中的第一个元素与指定选择器或组匹配的文档选择器。如果没有找到匹配项，则返回 null。

因此，您在 script.js 中的代码仅选择了第一个 .dropdown 元素，而不是全部，因此仅在您的 中运行“关于我们” 第一个下拉菜单元素。

为了解决这个问题，您应该重新编码您的 script.js 文件并尝试使用 querySelectorAll 而不是 querySelector。你会发现更多关于如何使用querySelectorAll的信息here

【讨论】：

啊哈！！好的，我会的，谢谢一百万！