如何判断导航栏是否折叠

Question

我有一个导航栏：

<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")
}

但它不起作用。

Answer 1

我测试了它，它能工作。您可能在启动测试时遇到问题，或者您的切换按钮没有提到的id(切换(。

触发事件(点击(

使用捕获所有点击

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

测试的替代方案

刚刚好的老香草JS:

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

Answer 2

您可以使用崩溃事件：

$('#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>