Bootstrap 导航栏中的下拉菜单 AngularJS & Jade

Question

我正在使用 AngularJS 和 Jade 以及 angular-ui-bootstrap 在主导航中创建一个下拉菜单，它在宽屏幕上工作得很好，但是在移动设备上会出现问题，你必须切换菜单！

当您单击其中一个菜单项时，导航栏会关闭，因此无法在子菜单中单击某些内容！

移动菜单（无下拉切换）

普通菜单

点击下拉菜单后移动菜单应该的样子（但是当你点击它时整个菜单就关闭了）

代码：

button.navbar-toggle(type='button', ng-click='isCollapsed = !isCollapsed')
  span.icon-bar
  span.icon-bar
  span.icon-bar
.navbar-collapse(ng-class='{collapse: isCollapsed}', ng-init='isCollapsed = true', ng-click='isCollapsed = true') 
  ul.nav.navbar-nav
    li: a(href='/#/') item1
    li: a(href='/#/') item2
    li(uib-dropdown=true,dropdown-append-to-body=false)
      a(href=true,uib-dropdown-toggle=true) Dropdown
      ul.uib-dropdown-menu
        li: a(href='#/') Item 1
        li: a(href='#/') Item 2
    li: a(href='/#/') item3
    li: a(href='/#/') item4

我怎样才能得到它，所以当我点击菜单中的下拉菜单时，它不会关闭整个菜单，而是显示下拉菜单？

Answer 1

首先，最好移动 ng-click 表达式并在此视图控制器中为它们找到一个安全的家。 ng-init 仅在非常特殊的情况下才需要，而且它会使您的 DOM 变得混乱。

$scope.isCollapsed = true;

$scope.toggleCollapseState = function($event) {
  $scope.isCollapsed = !$scope.isCollapsed;
}

// DOM
button.navbar-toggle(type='button', ng-click='toggleCollapseState')

关于您的切换问题。似乎有一个 ng-click 属性接受一个表达式（在这种情况下你想使用一个函数），你可以附加到上面有 uib-dropdown-toggle 的元素。

li(uib-dropdown=true,dropdown-append-to-body=false)
  a(href=true,uib-dropdown-toggle=true ng-click='navListDropdownToggled') Dropdown

然后您可以使用 ng-click 传递给表达式的 $event 局部变量来停止传播到父元素。

$scope.navListDropdownToggled = function navListDropdownToggledFn($event) {
  $event.stopPropagation();

  // If you need to handle any toggle state-based logic 
  // you can do it by altering the isCollapsed variable.
  // $scope.isCollapsed = true;  
}

编辑：

根据 Bootstraps Documentation，还有一个 on-toggle 属性也传递给 $event 本地，因此这可能是 ng-click 更合适的替代品.

Bootstrap 导航栏中的下拉菜单 AngularJS & Jade

Bootstrap dropdown in navbar with AngularJS & Jade

css

twitter-bootstrap

angularjs

angular-ui-bootstrap

pug

编辑：