Javascript 引导3导航按钮，从切换到下拉

我正在开发一个

AngularJS

应用程序，其中我使用

bootstrap3

来设计我的导航（），这非常有效

我的校长

<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-collapse

）。我想保持这种状态

---

我的问题是：在手机上，有没有一种方法可以让按钮作为下拉按钮而不是切换按钮？所以用户可以点击他想要的任何地方，它就会关闭，而不必点击按钮

这个例子怎么样

var-app=angular.module（'app'，['ui.bootstrap']）；
应用控制器（'菜单'、功能（$范围）{
$scope.logo=http://i.stack.imgur.com/P1BHs.png';
$scope.user={}；
$scope.user.organization={}；
$scope.user.organization.name=“组织测试”；
$scope.user.image_路径=”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:“意大利语”}]；
$scope.name=“user123”；
$scope.setLang=函数（键）{
}
$scope.containerClick=函数（$event）{
log（“containerClick:+$scope.navCollapsed）
$scope.navCollapsed=true；
}
});

安古拉斯普朗克















2016年XYZ。版权所有。
这正是我过去几天一直在寻找的。我唯一需要更改的是删除“ui切换类”和“数据目标”。不知何故，它没有停止工作，可能是因为我目前没有使用Angular Bootstrap的最新版本。不管怎样，它现在可以工作了，而且你已经为我节省了很多多余的代码。非常感谢！！！