Bootstrap 4导航栏下拉菜单点击后无法跳转问题求助

故障根因 #

1. Bootstrap属性与版本不匹配 #

你引入的是Bootstrap 4.3.1版本，但代码中导航开关、下拉组件使用的data-bs-toggle、data-bs-target是Bootstrap 5专属的属性标识，Bootstrap 4对应的属性为不带-bs-后缀的data-toggle、data-target。属性不匹配导致下拉组件没有被Bootstrap JS正确初始化，下拉交互逻辑完全失效。

2. 依赖加载顺序错误 #

Bootstrap 4的JS功能依赖jQuery和Popper.js，你当前的JS加载顺序为Popper.js → Bootstrap.min.js → 其他脚本 → jQuery，jQuery被放在Bootstrap JS之后加载，Bootstrap执行时无法识别依赖，直接导致所有Bootstrap JS组件失效。

3. CSS语法错误（非直接诱因，建议修复） #

自定义CSS中存在嵌套选择器的语法错误，可能干扰部分样式渲染：

/* 错误写法 */
a{color:#00008b;text-decoration:underline;a:hover{color:#036;text-decoration:underline}}

修复方案 #

第一步：调整JS加载顺序 #

将jQuery移到所有Bootstrap相关脚本之前加载，保证依赖顺序正确：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>
<script>var lazyLoadInstance = new LazyLoad({ elements_selector: ".lazy" });</script>

第二步：替换Bootstrap 4对应属性 #

1. 导航开关按钮替换属性：
   原代码：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

替换后：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

2. 下拉触发按钮替换属性：
   原代码：

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Photos</a>

替换后：

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">Photos</a>

第三步：修复CSS语法错误 #

将错误嵌套的a选择器拆分：

a{color:#00008b;text-decoration:underline;}
a:hover{color:#036;text-decoration:underline;}

修复完成后下拉菜单即可正常展开，点击相册链接就能正常跳转。

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