个人中心
gpt4 book ai didi

css - Twitter Bootstrap 导航栏折叠功能不起作用

转载 作者：太空宇宙 更新时间：2023-11-03 21:38:46 24 4
gpt4 key购买 nike

我正在尝试实现响应式 Bootstrap 导航栏，但在处理折叠状态时遇到问题。

一旦我调整了窗口大小，我就进入了这个按钮出现的状态:

enter image description here

当我点击这个按钮时没有任何反应。

下面我附上了我当前导航栏的代码。难道是 div 的命名有误？当我阅读文档时，它说需要折叠插件 - 这个插件不应该包含在 angular 的标准 Bootstrap 中吗？

我也试过这个解决方案: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>

最佳答案

如果你没有使用 twitter bootstrap 的 javascript 那么你可以使用 angular-ui bootstrap的 collapse 指令折叠你的导航栏。只需确保在 .navbar-toggle 按钮上放置一个 ng-click 指令即可取消折叠变量的当前值。将另一个 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我注意到您在 .navbar-collapse 项中有一个 ng-controller，因为 ng-controller 创建了一个子范围，您有使用 collapse="!$parent.collapse" 和 ng-click="$parent.collapse = false" 在该元素本身内。 plunker已经在上面更新了，查看一下。

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

关于css - Twitter Bootstrap 导航栏折叠功能不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24994183/

24 4 0
文章推荐： OpenCV:如何在调用 cvFindContours() 后访问 O(1) 中的一个轮廓？
文章推荐： python - 删除外部文本文件中的某些行
文章推荐： image-processing - short[] array to EMGU Image ，最快的方法？
文章推荐： c# - JSONConvert.DeserializeObject 不处理具有未命名数组项的子数组
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com