我刚刚创建了一个AngularJS项目与咕噜声和Yeoman。包含更新版本到Angular 1.3.13。我想使用Angular UI引导。我添加了反应敏感的Nav Bar。但是，在小屏幕上，下降似乎不起作用。当我点击下拉菜单时，整个菜单隐藏。
这是我的index.html
<!doctype html> <html class="no-js"> <head> <Meta charset="utf-8"> <title></title> <Meta name="description" content=""> <Meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> </head> <body ng-app="webClientApp"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Add your site or application content here --> <header> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#/">Web Client</a> </div> <!-- Collect the nav links,forms,and other content for toggling --> <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true"> <ul class="nav navbar-nav"> <li class="active"><a href="">Link</a></li> <li><a href="">Link</a></li> <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="">Action</a></li> <li><a href="">Another action</a></li> <li><a href="">Something else here</a></li> <li><a href="">Separated link</a></li> <li><a href="">One more separated link</a></li> </ul></li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="">Link</a></li> <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="">Action</a></li> <li><a href="">Another action</a></li> <li><a href="">Something else here</a></li> <li><a href="">Separated link</a></li> </ul></li> </ul> </div> <!-- /.navbar-collapse --> </nav> </header> <div class="container"> <div ng-view=""></div> </div> <div class="footer"> <div class="container"> <p> <span class="glyphicon glyphicon-heart"></span> from the Yeoman team </p> </div> </div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <script> !function(A,n,g,u,l,a,r) { A.GoogleAnalyticsObject = l,A[l] = A[l] || function() { (A[l].q = A[l].q || []).push(arguments) },A[l].l = +new Date,a = n.createElement(g),r = n .getElementsByTagName(g)[0],a.src = u,r.parentNode .insertBefore(a,r) }(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create','UA-XXXXX-X'); ga('send','pageview'); </script> <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-touch/angular-touch.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/scripts.js --> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> <script src="scripts/controllers/about.js"></script> <!-- endbuild --> </body> </html>
我正在使用所有最新版本的JS。这是我的bower.json
{
"name": "web-client","version": "0.0.0","dependencies": {
"angular": "^1.3.13","bootstrap": "^3.3.2","angular-animate": "^1.3.13","angular-cookies": "^1.3.13","angular-resource": "^1.3.13","angular-route": "^1.3.13","angular-sanitize": "^1.3.13","angular-touch": "^1.3.13","angular-bootstrap": "0.12.1"
},"devDependencies": {
"angular-mocks": "^1.3.13"
},"appPath": "app","moduleName": "webClientApp"
}
全屏导航栏正常工作。但是当我调整浏览器大小的大小时，响应栏正在工作。菜单将仅在单击切换按钮时显示。但是当我点击下拉菜单，整个菜单隐藏。
我跟着这个StackOverflow Question，我得到了一个Plunker Demo。它工作正常
但是我正在使用所有文件的最新版本。所以我的工作不正常这是my code what I tried in Plnker。
如何解决这个问题？谢谢。
您的下拉列表已更改。
这是一个Plunker
<li dropdown>
<a href="#" dropdown-toggle>Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">...</a></li>
....
</ul>
</li>
