我正在使用动画汉堡菜单(https://jonsuh.com/hamburgers/)打开全屏菜单。这一切都按预期工作,但我无法弄清楚如何在点击时关闭菜单(当然还可以反转动画)。
我能够使用JS添加类'is-active',并添加“onclick =”openNav()“工作正常,但似乎创建onclick =”toggleNav()“可能更合适,我只是不能似乎弄清楚如何在JS中编写它。
function openNav() {
document.getElementById("popUpNav").style.height = "100%";
}
function closeNav() {
document.getElementById("popUpNav").style.height = "0%";
}
// Hamburger Menu Spin
var hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function() {
hamburger.classList.toggle("is-active");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/0.9.3/hamburgers.css" rel="stylesheet"/>
<!-- Full Screen Navigation -->
<div id="primaryNav">
<nav>
<!-- Spinning Hamburger Button -->
<button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation" aria-expanded="false" onclick="openNav()">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="popUpNav" class="overlay" onclick="closeNav()">
<div class="overlay-content">
<a href="#problemSolution" data-scroll onclick="closeNav()">Link 1</a>
<a href="#" data-scroll onclick="closeNav()">Link 2</a>
<a href="#" data-scroll onclick="closeNav()">Link 3</a>
<a href="#" data-scroll onclick="closeNav()">Link 4</a>
</div>
</div>
</nav>
</div><!-- End Primary Nav -->
我做了什么:
每当点击汉堡包时,我们将检查它是否已经有is-active
类。如果是,则表示菜单当前处于活动状态,我们应该在这种情况下调用closeNav
。如果它没有is-active
类,那么这意味着我们应该调用openNav
。
closeNav
和openNav
将:
is-active
类。PS:
0% height
还是100% height
。所以我把它改成display block/none
只是为了告诉你它有效。onclick
中删除了menu
属性,因为你已经有了一个EventListener。link
。function openNav() {
hamburger.classList.add("is-active");
document.getElementById("popUpNav").style.display = "block";
}
function closeNav() {
hamburger.classList.remove("is-active");
document.getElementById("popUpNav").style.display = "none";
}
// Hamburger Menu Spin
var hamburger = document.querySelector(".hamburger");
hamburger.addEventListener('click', () => hamburger.classList.contains('is-active') ? closeNav() : openNav());
closeNav();
<link href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/0.9.3/hamburgers.css" rel="stylesheet"/>
<!-- Full Screen Navigation -->
<div id="primaryNav">
<nav>
<!-- Spinning Hamburger Button -->
<button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation"
aria-expanded="false">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="popUpNav" class="overlay" onclick="closeNav()">
<div class="overlay-content">
<a href="#problemSolution" data-scroll onclick="closeNav()">Link 1</a>
<a href="#" data-scroll onclick="closeNav()">Link 2</a>
<a href="#" data-scroll onclick="closeNav()">Link 3</a>
<a href="#" data-scroll onclick="closeNav()">Link 4</a>
</div>
</div>
</nav>
</div><!-- End Primary Nav -->