如何判断导航栏是否折叠？答案

【问题标题】：How to tell if navbar is collapsed or not?如何判断导航栏是否折叠？
【发布时间】：2020-08-27 21:33:52
【问题描述】：

我有一个导航栏：

<nav id="navbar" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#"></a>
  <button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse text-right" id="navbarNav">
      <ul class="navbar-nav ml-auto">
          <li class="nav-item">
              <a class="nav-link" id="about" href="Gibbs.html"><span><strong>ABOUT</strong></span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#"><span>NEWS</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#"><span>LAB MEMBERS</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#"><span>RESEARCH</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="publications.html"><span>PUBLICATIONS</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#"><span>OPPORTUNITIES</span></a>
          </li>
      </ul>    
  </div>
</nav>

当导航栏折叠（即未展开）时，我想为页面上的其他元素设置样式。 javascript中是否有一种简单的方法可以判断导航栏何时折叠与未折叠？试过这个：

if ($('#toggle').attr('aria-expanded') == "true") {
  console.log("true")
  }

但它不起作用。提前致谢。

【问题讨论】：

试试if( $(#navbarNav').is(':hidden') )
监听引导事件
Bootstrap 会在您折叠导航栏时添加一个类，对吧？您可以尝试使用 javascript 检查类（如果存在或不存在）。

标签： javascript html css bootstrap-4 nav

【解决方案1】：

我测试了它并且它有效。您可能无法触发测试，或者您的切换按钮没有提到的 id (toggle)。

触发事件（点击时）

捕获所有点击：

window.onclick = function(e) { ... };

替代测试

只是好旧的香草 JS：

if (!document.getElementById('toggle').classList.contains('collapsed')) {...}

【讨论】：

【解决方案2】：

您可以使用collapse events:

$('#navbar').on('show.bs.collapse', function () {
    console.log('not collapsed');
}).on('hide.bs.collapse', function () {
    console.log('collapsed');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav id="navbar" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#"></a>
    <button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse text-right" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" id="about" href="Gibbs.html"><span><strong>ABOUT</strong></span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>NEWS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>LAB MEMBERS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>RESEARCH</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="publications.html"><span>PUBLICATIONS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>OPPORTUNITIES</span></a>
            </li>
        </ul>
    </div>
</nav>

【讨论】：