javascript – Bootstrap 3导航按钮,从切换到下拉列表

2023年3月16日 137次阅读

我正在开发一个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>

现在,当在移动设备上时,它就是导航栏标题中出现的按钮,其行为类似于切换,正如使用Bootstraps导航所预期的那样.这意味着用户必须单击它才能打开它,然后每当他想关闭它时再次单击它.

在平板电脑/台式机上,它是两个下拉菜单(来自导航栏崩溃).我希望保持这种方式.

我的问题是：在手机上,有没有办法让按钮表现为下拉菜单而不是切换？因此,用户可以点击他想要的任何地方并关闭而不必点击按钮？

最佳答案 这个例子怎么样？

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>
点赞