Question

我按照这里的答案获取我的链接，以便在展开的导航栏处于下拉模式时折叠：

Programatically toggle bootstrap 3 navigation bar

然而，如果它不处于下拉模式（桌面），我会得到一个奇怪的＆＃34;崩溃＆＃34;我的常规非移动导航栏上的动画瞬间完成 - 它从我的按钮文本上下淡出之间交替，就好像它试图折叠那些不在那里的下拉式导航栏一样，所以它改为我的主导航栏的内容。

我的菜单链接有以下代码：

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <!--ko foreach: authorizedRoutes -->
            <li>
                <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"></a>
            </li>
            <!-- /ko -->
        </ul>
      </div>

这是我的崩溃图标：

         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" toggle="offline">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

导致这种奇怪故障的原因是什么？

这里有一个可以看到行为的jsfiddle - （缩小/扩展浏览器以查看模式 - 扩展是故障发生的地方）：http://jsfiddle.net/D2Gsa/11/

Answer 1

关于“会导致这种情况的原因”的问题。您有data-toggle="collapse"个链接，这会强制他们折叠整个列表容器data-target = ".navHeaderCollapse"。

您可以通过删除data-toggle="collapse"链接来解决此问题，这也会导致下拉菜单在移动模式下点击时不会崩溃

此外，您可以专门针对非移动模式覆盖.navHeaderCollapse的动画过渡。这样点击链接将在移动视图中折叠整个菜单，但不会为更宽的屏幕执行此操作。

@media (min-width: 768px){
    .navHeaderCollapse.collapsing{
        transition:none;
        -webkit-transition:none;
        -moz-transition:none;
        overflow:visible;
     }
}

查看更新的fiddle

Bootstrap Navbar在非移动时折叠毛病（包括小提琴）

1 个答案: