我正在开发一个 AngularJS 应用程序，我在其中使用 Bootstrap 3 来设置我的导航样式 (Navbar)，这非常有效。
我的标题
<div class="navbar-header">
<button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings">
<i class="glyphicon glyphicon-cog"></i></button>
<a class="navbar-brand text-lt" href="#/dashboard">
<img class="m-mid" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
<span class="hidden-folded m-l-xs hide">{{app.name}}</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-settings navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
{{lang.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="lang in langs">
<a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
{{lang.name}}
</a>
</li>
</ul>
</li>
<li class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="thumb-sm avatar pull-right">
<img class="block" ng-src="{{ user.image_path }}" alt="...">
<i class="on md b-white bottom"></i>
</span>
{{name} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#/setting"></a></li>
<li><a href="#/profile"></a></li>
<li><a href="#/help"></a></li>
</ul>
</li>
</ul>
</div>
现在在移动设备上，navbar-header 中的 button 出现并表现得像 toggle，正如预期的那样使用 Bootstrap 导航。这意味着用户必须单击它才能打开它，然后在他想关闭它时再次单击它。
在平板电脑/台式机上，它是两个下拉菜单(来自 navbar-collapse)。我想保持这种状态。
我的问题是:在手机上有没有办法让按钮表现为下拉而不是切换？所以用户可以点击他想要的任何地方然后关闭而不是点击按钮？
最佳答案
这个例子怎么样？
var app = angular.module('app', ['ui.bootstrap']);
app.controller('menu', function($scope) {
$scope.logo = 'http://i.stack.imgur.com/P1BHs.png';
$scope.user = {};
$scope.user.organization = {};
$scope.user.organization.name = "Org test";
$scope.user.image_path = "http://ionicframework.com/img/docs/venkman.jpg";
$scope.app = {name: "App test"};
$scope.lang = {name: "English"};
$scope.langs = [{key: "EN", name: "English"},{key: "IT", name: "Italian"}];
$scope.name = "user123";
$scope.setLang = function(key) {
}
$scope.containerClick = function($event) {
console.log("containerClick: "+$scope.navCollapsed)
$scope.navCollapsed = true;
}
});<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="menu">
<div class="navbar-header">
<button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<i class="glyphicon glyphicon-cog"></i></button>
<a class="navbar-brand text-lt" href="#/dashboard">
<img class="m-mid" style="width: 200px" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
<span class="hidden-folded m-l-xs hide">{{app.name}}</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-settings navbar-right" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle>
{{lang.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="lang in langs">
<a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
{{lang.name}}
</a>
</li>
</ul>
</li>
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle>
<span class="thumb-sm avatar pull-right">
<img class="block img-circle" ng-src="{{ user.image_path }}" alt="...">
<i class="on md b-white bottom"></i>
</span> {{name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#/setting"></a>
</li>
<li>
<a href="#/profile"></a>
</li>
<li>
<a href="#/help"></a>
</li>
</ul>
</li>
</ul>
</div>
<div class="container container-exp" ng-click="containerClick($event)"></div>
<footer>
<hr />
<center>2016 XYZ. All Rights reserved.</center>
</footer>
</body>
</html>关于javascript - Bootstrap 3 导航按钮，从切换到下拉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35016253/