css - Bootstrap 3 导航下拉菜单停止工作

Question

我没有更改 prod 和 qa 上的任何代码，但由于某种原因，我的 qa collapse nav 已停止工作，因为我无法弄清楚哪里出了问题，我检查了控制台是否有错误，但它的什么都没显示，我什至比较了两个代码，它显示一切都很好。

生产工作

<div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
                        <li><a href="../parents/dailyexperience" style="padding-top: 21px; padding-bottom: 11px; !important">Daily Experience</a></li>
                        <li><a href="../parents/attendance_records" style="padding-top: 21px; padding-bottom: 11px; !important">Attendance Records</a></li>
                        <li><a href="../parents/photos" style="padding-top: 21px; padding-bottom: 11px; !important">Photos</a></li>
                        <li><a href="../parents/school_info" style="padding-top: 21px; padding-bottom: 11px; !important">School Info</a></li>
                        <li class="dropdown">
                <a data-toggle="dropdown" style="padding-top: 21px; padding-bottom: 11px; !important" class="dropdown-toggle" href="#">History <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                                        <li><a href="../parents/dailyexperience_history" style="padding-top: 21px; padding-bottom: 11px; line-height: 0.4px; !important">Daily Experience</a></li>
                                        <li><a href="../parents/attendance_records_history" style="padding-top: 21px; padding-bottom: 11px; line-height: 0.4px; !important">Attendance Records</a></li>
                                    </ul>
            </li>
                        <li><a href="../parents/profile" style="padding-top: 21px; padding-bottom: 11px; !important">Profile</a></li>
                        <li class="dropdown">
                <a data-toggle="dropdown" style="padding-top: 21px; padding-bottom: 11px; !important" class="dropdown-toggle" href="#">Select Child <b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    <li><a href="../parents/select_a_child/50" style="padding-top: 21px; padding-bottom: 11px; line-height: 0.4px; !important">Annett Joy</a></li>

                    <li><a href="../parents/select_a_child/51" style="padding-top: 21px; padding-bottom: 11px; line-height: 0.4px; !important">Charlotte Pinkiewicz</a></li>
                                    </ul>
            </li>
                        <li><a href="../parents/change_password" style="padding-top: 21px; padding-bottom: 11px; !important">Change Password</a></li>
                        <li><a href="../logout" style="padding-top: 21px; padding-bottom: 11px; !important">Logout</a></li>

        </ul>
    </div>

质量检查不工作

<div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
                        <li><a href="../parents/dailyexperience" style="padding-top: 21px; padding-bottom: 11px; !important">Daily Experience</a></li>
                        <li><a href="../parents/attendance_records" style="padding-top: 21px; padding-bottom: 11px; !important">Attendance Records</a></li>
                        <li><a href="../parents/photos" style="padding-top: 21px; padding-bottom: 11px; !important">Photos</a></li>
                        <li><a href="../parents/school_info" style="padding-top: 21px; padding-bottom: 11px; !important">School Info</a></li>
                        <li class="dropdown">
                <a data-toggle="dropdown" style="padding-top: 21px; padding-bottom: 11px; !important" class="dropdown-toggle" href="#">History <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                                        <li><a href="../parents/dailyexperience_history" style="padding-top: 21px; padding-bottom: 11px; line-height: 0.4px; !important">Daily Experience</a></li>
                                        <li><a href="../parents/attendance_records_history" style="padding-top: 21px; padding-bottom: 11px; line-height: 0.4px; !important">Attendance Records</a></li>
                                    </ul>
            </li>
                        <li><a href="../parents/profile" style="padding-top: 21px; padding-bottom: 11px; !important">Profile</a></li>
                        <li class="dropdown">
                <a data-toggle="dropdown" style="padding-top: 21px; padding-bottom: 11px; !important" class="dropdown-toggle" href="#">Select Child <b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    <li><a href="../parents/select_a_child/50" style="padding-top: 21px; padding-bottom: 11px; line-height: 0.4px; !important">Annett Joy</a></li>

                    <li><a href="../parents/select_a_child/51" style="padding-top: 21px; padding-bottom: 11px; line-height: 0.4px; !important">Charlotte Pinkiewicz</a></li>
                                    </ul>
            </li>
                        <li><a href="../parents/change_password" style="padding-top: 21px; padding-bottom: 11px; !important">Change Password</a></li>
                        <li><a href="../logout" style="padding-top: 21px; padding-bottom: 11px; !important">Logout</a></li>

        </ul>
    </div>

这是我的网络标签的截图

Answer 1

您的代码中的一切都很好，但我确定您的 jQuery 库没有正确加载。确保 jQuery 脚本包含在页面中并出现在指定路径中。然后它将正常工作。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

这里是包含jQuery引用后的QA代码演示。

JS Fiddle Demo