Question

我在我的页面上使用Bootstrap 3导航栏：

<nav class="navbar navbar-default navbar-inverse" role="navigation">
        <div class="navbar-header">
             <a class="navbar-brand" href="#">Brand</a>
        </div>

        <div class="collapse navbar-collapse invisible">
            <ul class="nav navbar-nav pull-right">
                <li>
                   ....
                </li>
            </ul>
        </div>
    </nav>

页面加载时，navbar-collapse默认设置为invisible。当满足某些条件时（例如，接收的JSON的某个值为真），我删除invisible类。当导航栏未折叠时（在大屏幕上），这非常有效。在较小的设备上，用于展开/折叠隐藏内容的按钮永远不会显示（在删除不可见的类之后）。这就像隐藏的内容从未存在过。

我想当从DOM中删除invisible类时，我必须强制导航栏重新计算。有办法怎么做？

我使用$('.navbar-collapse').removeClass('invisible')

删除了该课程

Answer 1

您错过了navbar-header中移动导航按钮的HTML以及将其附加到列表项的ID :(并且可能会将invisible类添加到navbar-toggle按钮。

请参阅视口减少时虚拟条件的示例。

此外，（取决于您使用的Bootstrap版本）使用navbar-right代替pull-right。

$(window).resize(function() {
  var viewportW = $(window).width();

  if ($(window).width() < 991) {

    $('.navbar-collapse, .navbar-toggle').removeClass('invisible');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-inverse" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed invisible" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false"> <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="#">Brand</a>

  </div>
  <div class="collapse navbar-collapse invisible" id="bs-navbar">
    <ul class="nav navbar-nav navbar-right">
      <li> <a href="#"> About</a>

      </li>
      <li> <a href="#"> Contact</a>

      </li>
      <li> <a href="#"> Products</a>

      </li>
      <li> <a href="#"> Blog</a>

      </li>
    </ul>
  </div>
</nav>

Boostrap 3 Navbar在调整大小时不显示以前隐藏的内容

1 个答案: