单击按钮时打开/关闭动画汉堡菜单

Question

我正在使用动画汉堡菜单(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 -->

Answer 1

我做了什么：

每当点击汉堡包时，我们都会检查它是否已经上is-active课。如果是这样，则表示菜单当前处于活动状态，在这种情况下我们应该调用closeNav。如果它没有is-active类，那么这意味着我们应该调用openNav。

closeNav和openNav将：

• 从汉堡包中添加/删除类is-active。
• 添加/删除菜单的样式。

附注：

• 由于您没有提供整个代码，因此我们无法真正查看当前菜单是0% height还是100% height。 所以我将其更改为display block/none只是为了向您展示它有效。
• 我从menu中删除了onclick属性，因为您已经有一个事件侦听器。
• 请确保不包含我在示例中提供的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 -->