Question

我正在尝试实现响应式引导程序导航栏，但无法处理折叠状态。

一旦我调整窗口大小，我就会进入显示此按钮的状态：

enter image description here

点击此按钮时没有任何反应。

下面我附上了我当前导航栏的代码。这可能是错误的div的命名吗？当我阅读文档时，它说崩溃插件是必需的 - 不应该将此插件包含在角度的标准引导程序中吗？

我也尝试过这个解决方案：https://stackoverflow.com/a/17672546 - 但就好像collapse="isCollapsed"中的状态发生变化一样，没有达到效果。

<nav class="navbar navbar-default" role="navigation" >
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My Application</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1" ng-controller="HeaderController">
      <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/logbook')}"><a href="#/logbook">Log Books</a></li>
        <li ng-class="{ active: isActive('/logentry')}"><a href="#/logentry">Logs</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li ng-class="{ active: isActive('/logentry/create')}"><a href="#/logentry/create">Create Log</a></li>
        <li ng-class="{ active: isActive('/status')}"><a href="#/status">Show Status</a></li>
        <li ng-class="{ active: isActive('/statistics')}"><a href="#/statistics">Statistics</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 1

如果您没有使用twitter bootstrap的javascript，那么您可以使用angular-ui bootstrap的collapse指令来折叠您的导航栏。只需确保在ng-click按钮上放置.navbar-toggle指令，否定崩溃变量的当前值。将另一个ng-click添加到.navbar-collapse元素，以便在点击链接时折叠导航栏。

<强> Here's a DEMO

    <body ng-click="collapse = false">
      <div class="navbar navbar-default" ng-click="$event.stopPropagation()">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" 
                        ng-click="collapse = !collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand">
                        Title
                    </a>
                </div>

                <div class="collapse navbar-collapse" 
                    ng-controller="HeaderController"
                    collapse="!$parent.collapse" ng-click="$parent.collapse = false">
                    <ul class="nav navbar-nav navbar-right">
                       <li><a href="">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
      </body>

更新：

1我注意到ng-controller项中有.navbar-collapse，因为ng-controller创建了子范围，您必须使用 {{1该元素本身内的和 collapse="!$parent.collapse" 。上面已经更新了plunker，检查出来。

2作为旁注，您可以更进一步，在html正文中添加ng-click="$parent.collapse = false"，以便在用户点击导航栏外部时折叠导航栏，只需确保添加ng-click="collapse = false"元素ng-click="$event.stopPropagation()"，以避免在用户点击.navbar时将其折叠。

Answer 2

您的代码似乎没问题，请参阅此处http://jsbin.com/xinujuvi/1/edit

确保您已引用bootstrap.min.js脚本

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Answer 3

请务必参考：

   ui-bootstrap-tpls-0.11.0.min.js

您可以从their site

下载

这是代码：

 <nav class="navbar navbar-default" role="navigation" >
   <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle btn-danger" ng-click="isCollapsed = !isCollapsed">
        <span class="icon-bar btn-info"></span>
        <span class="icon-bar btn-info"></span>
        <span class="icon-bar btn-info"></span>
    </button>
    <a class="navbar-brand">YouSite</a>
</div>
<div class="navbar-collapse collapse" collapse="!isCollapsed" id="navbar-collapse-1" ng-controller="HeaderController">
  <ul class="nav navbar-nav">
    <li ng-class="{ active: isActive('/logbook')}"><a href="#/logbook">Log Books</a></li>
    <li ng-class="{ active: isActive('/logentry')}"><a href="#/logentry">Logs</a></li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li ng-class="{ active: isActive('/logentry/create')}"><a href="#/logentry/create">Create Log</a></li>
    <li ng-class="{ active: isActive('/status')}"><a href="#/status">Show Status</a></li>
    <li ng-class="{ active: isActive('/statistics')}"><a href="#/statistics">Statistics</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

Twitter引导程序导航栏崩溃功能无法正常工作

3 个答案: