Bootstrap 3導航按鈕，從切換到下拉列表

Question

我正在開發一個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 ，正如使用Bootstraps導航所預期的那樣。 這意味着用戶必須單擊它才能打開它，然后每當他想關閉它時再次單擊它。

在平板電腦/台式機上，它是兩個下拉菜單（來自navbar-collapse ）。 我希望保持這種方式。

我的問題是：在手機上，有沒有辦法讓按鈕表現為下拉菜單而不是切換？ 因此，用戶可以點擊他想要的任何地方並關閉而不必點擊按鈕？

Answer 1

這個例子怎么樣？

 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 ml-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="pt-sm pb-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>

Bootstrap 3導航按鈕，從切換到下拉列表

問題描述

1 個解決方案

解決方案1
1 已采納 2016-01-27 08:17:45

Bootstrap 3導航按鈕，從切換到下拉列表

問題描述

1 個解決方案

解決方案1 1 已采納 2016-01-27 08:17:45

解決方案1
1 已采納 2016-01-27 08:17:45