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

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 类。当导航栏未折叠时(在大屏幕上)，这非常有效。在较小的设备上，用于展开/折叠隐藏内容的按钮永远不会显示(在删除不可见类之后)。就像隐藏的内容从未存在过一样。

我想当 invisible 类从 DOM 中移除时，我必须强制导航栏重新计算自身。有办法做到这一点吗？

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

Answer 1

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

查看视口(viewport)缩小的虚拟条件示例。

此外，(取决于您使用的 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>