Bootstrap Dropdown菜单不能正确处理脚本和链接

时间:2016-02-05 12:57:05

标签: jquery angularjs css3 drop-down-menu twitter-bootstrap-3

更新:为了避免混淆,我分叉了Plunker,并删除了另一个下拉菜单。为了澄清下拉菜单,我遇到问题的是当你调整屏幕大小时有3个条形的菜单。

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

  

我一直在研究这个问题,到目前为止,我已经尝试了所有这些问题   StackOverflow上的解决方案,例如:

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

<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

1 个答案:

答案 0 :(得分:0)

您已经错过了数据目标

中的#个ID
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">