Bootstrap折叠导航栏选择菜单后无法再次正常展开问题

兄弟，我仔细扒了你的代码，这个导航栏闪关的问题根源特别明确——重复引入了多个不同版本的jQuery和库文件，直接把Bootstrap的导航栏交互逻辑搞冲突了！下面给你一步步理顺解决：

问题分析 #

你页面里的jQuery至少塞了3个版本（2.1.1、1.10.2、1.11.1），而且Bootstrap的CSS/JS、shieldui也重复引入了两次。这种重复加载会让不同版本的jQuery互相覆盖$对象，导致Bootstrap的导航栏事件绑定混乱，点击后触发多次折叠/展开指令，自然就出现了“刚展开就立刻缩回去”的鬼畜情况。

解决方案 #

1. 清理重复的资源引入 #

把所有重复的jQuery、shieldui、Bootstrap文件删掉，只保留一份兼容的版本。比如Bootstrap 3.3.7建议搭配jQuery 1.9.1+，这里选1.11.1就很合适，稳定性拉满。

2. 调整资源加载顺序 #

正确的加载逻辑应该是：

• 元信息（charset、viewport）
• CSS文件（先第三方库，再自定义样式）
• jQuery（必须在所有依赖它的JS之前）
• 其他依赖JS（比如shieldui）
• Bootstrap JS
• 你的自定义脚本

3. 修复不完整的导航栏HTML #

你提供的代码里<li class="nav-没写完，得确保每个导航项都正确闭合，比如改成<li class="nav-item"><a class="nav-link" href="#">菜单1</a></li>这种完整结构。

修改后的核心代码示例 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>@Page.Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- 完善viewport参数，确保移动端适配 -->
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    
    <!-- CSS文件：先第三方，再自定义 -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" /> <!-- 如果本地Bootstrap和CDN内容重复，建议只留一个 -->
    
    <!-- 只保留一个jQuery版本 -->
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
    
    <!-- 依赖JS：shieldui -->
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
    
    <!-- Bootstrap JS，必须在jQuery之后引入 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <!-- 其他依赖脚本（仅保留一份） -->
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    
    <!-- 合并自定义脚本，减少重复DOM绑定 -->
    <script type="text/javascript"> 
        $(function () { 
            $("#datepicker").shieldDatePicker({ }); 
            $('#Home_Ph, #Cell_Ph').shieldMaskedTextBox({ mask: "(000) 000-0000" }); 
            $("#DL_or_ID, #Name, #AddressNo, #AddrStName, #AddrStNameEnd, #AddrUnitNumber").shieldTextBox({ }); 
        }); 
    </script> 
    
    <!-- 自定义样式 -->
    <style> 
        .container { 
            background-image: url("/Content/img/datepicker/s4.png"); 
            background-position: center; 
            background-repeat: no-repeat; 
            height: 740px; 
        } 
        .top { padding-top: 290px; } 
        #field { 
            width: 200px; 
            line-height: 37px; 
            background-color: #f5f5f5; 
            opacity: 0.83; 
            padding: 7px; 
            margin: 0 auto; 
        } 
    </style> 
</head> 
<body style="color:#2C537B;font-weight:normal;background-color:#f5f5f5" class="theme-light"> 
    <header style="color:white;font-weight:normal;background-color:#3B414C"> 
        <div class="content-wrapper" style="color:#2C537B;font-weight:bold;background-color:#143150"> 
            <img src="~/Images/CDWP2.png"> 
            <div class="float-right" style="color:white;font-weight:bold;background-color:#394a7e"> 
                <section id="login"> 
                    <!-- 你的登录模块代码 -->
                </section> 
            </div> 
        </div> 
    </header> 
    
    <!-- 适配Bootstrap3的完整导航栏结构 -->
    <nav class="navbar navbar-static-top navbar-dark bg-primary">
        <div class="container">
            <div class="navbar-header">
                <div class="navbar-brand" style="color:white">TEST</div> <!-- 用style代替过时的font标签 -->
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> 
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button> 
            </div>
            <div class="collapse navbar-collapse" id="navbarColor03"> 
                <ul class="nav navbar-nav"> 
                    <li><a href="~/">Home</a></li>
                    <li><a href="~/About">About</a></li>
                    <li><a href="~/Contact">Contact</a></li>
                    <!-- 其他菜单项补全闭合标签 -->
                </ul> 
            </div>
        </div>
    </nav>
    
    <!-- 页面其他内容 -->
</body>
</html>

额外细节提醒 #

• Bootstrap 3的导航栏用navbar-toggle而不是navbar-toggler（后者是Bootstrap4+的语法），我帮你调整了，避免兼容性坑。
• 把分散的多个$(function())合并成一个，减少DOM ready事件的重复绑定，代码更简洁高效。
• 去掉了过时的<font>标签，用内联样式代替，更符合现代HTML规范。

按照这个修改后，导航栏的冲突问题应该就彻底解决了，再测试下移动端的折叠菜单，肯定能正常展开收起啦！

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