Я создал навигационное меню, которое буду использовать на сайте Bootstrap 4. Я нашел код jquery, который я изменил в соответствии с нужной мне функциональностью, но есть одна строка кода, которую я не совсем понимаю. Если кто-нибудь может помочь мне разобраться, это было бы замечательно. Я играл с этим в инструментах разработчика, чтобы попытаться понять его. Я могу провести вас через логику c Я понимаю и, надеюсь, вы можете направить меня в правильном направлении.
С кодом ниже, он ищет событие, чтобы всплыть. Затем он берет nav с классом .navbar-collapse и проверяет, есть ли у него класс show. Именно на этой стадии я потерян. Я знаю, что тег bang (!) Используется для переключения и означает противоположность назначенному значению, поэтому мой мозг интерпретирует его как отсутствие события, и если существует класс .navbar-toggler, чтобы скрыть элемент? Это не имеет смысла, поскольку для того, чтобы спрятать элемент в первую очередь, потребуется щелчок. Что именно здесь происходит?
nav class="navbar sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseExample">MENU</button>
<div class="collapse navbar-collapse" id="collapseExample">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">HOME</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">PROJECTS
<span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown_target">
<div>
<a class="dropdown-item">WEB</a>
</div>
<div>
<a class="dropdown-item">GRAPHICS</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">HIRE</a>
</li>
</ul>
</div>
</nav>
$(document).click(function(event) {
var clickover = $(event.target);
var $navbar = $(".navbar-collapse");
var _opened = $navbar.hasClass("show");
var $main = $('main');
if (_opened === true && !clickover.hasClass("navbar-toggler")) {
$navbar.collapse('hide');
$main.removeClass('menu-active');
} else {
$main.addClass('menu-active');
}
});