jquery - Bootstrap 下拉菜单无法按正确顺序使用脚本和链接

Question

更新:为了避免混淆，我 fork 了 Plunker，并删除了其他下拉菜单。为了澄清我遇到问题的下拉菜单是当你调整屏幕大小时有 3 个栏的菜单。

我在使用 angularjs 脚本和所有其他脚本以及按正确顺序放置的链接的引导下拉菜单按钮时遇到问题。这是我的 Plunker

I've been researching the problem, and so far I've tried all the solutions on StackOverflow such as:

以正确的顺序排列脚本和链接:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.2/angular-animate.min.js"></script>      
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

使用 JS 强制下拉切换:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});

到目前为止，我仍然无法使下拉菜单正常工作，这是我的 HTML:

 <!--Navigation Bar Relative --> 
<nav class="navbar navbar-inverse">

        <div class="container-fluid">

            <!--Logo!-->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">THE LOGO</a>

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavBar">

                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>

            </div>


            <!--Menu Items!-->
            <div class="collapse navbar-collapse" id="mainNavBar">
                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Timeline</a></li>
                    <li><a href="#">Contact</a></li>




                </ul>

                <!--Right-Align Menu Items!-->

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Logout</a></li>
                </ul> 

            </div>

        </div>


    </nav>

<div ng-controller="">

</div>

我是 Bootstrap 和 AngularJS 的新手，所以请解释我做错了什么并帮助我朝着正确的方向前进。谢谢!

http://plnkr.co/edit/wPGO01a9luGA7QyfzSAL?p=preview

Answer 1

你错过了 data-target 中 id 的 #

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">