Javascript 单击动画汉堡按钮以打开和关闭导航

我正在尝试创建一个菜单，当单击汉堡菜单时，它会从右侧滑入。我希望当用户单击X（汉堡菜单在单击时动画为X）或当用户单击屏幕上的任何其他位置时，菜单关闭

<button class="hamburger hamburger--spin" type="button">
    <span class="hamburger-box" onclick="openNav()">
    <span class="hamburger-inner"></span>
    </span>
</button> 

<div id="sideMenu-animated" class="sideMenu">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
    <a href="#">Item 5</a>
    <a href="#">Item 6</a>
</div>   

<script>
    function openNav() {
        document.getElementById("sideMenu-animated").style.width = "400px";
    }
    function closeNav() {
        document.getElementById("sideMenu-animated").style.width = "0";
    }
</script>
<script>
    var hamburger = document.querySelector(".hamburger");
        hamburger.addEventListener("click", function() {
             hamburger.classList.toggle("is-active");
        }
    );
</script>

函数openNav（）{
document.getElementById（“侧菜单动画”）.style.width=“400px”；
}
函数closeNav（）{
document.getElementById（“侧菜单动画”）.style.width=“0”；
}
var hamburger=document.querySelector（“.hamburger”）；
hamburger.addEventListener（“单击”，函数（）{
hamburger.classList.toggle（“处于活动状态”）；
}
);

---

基本上现在，我已经设置好了它，当用户单击菜单图标时，它会变为活动状态，并将菜单图标动画化为X。这样做还会触发我的openNav（）函数（使菜单项进入视图）

似乎您已经准备好了一切，但是没有调用close方法

首先，我要删除HTML中的

onclick

。您可以在单击处理程序中检查

是否处于活动状态

类，以查看菜单是否应通过单击按钮打开或关闭

 hamburger.addEventListener("click", function() {
    this.classList.toggle("is-active");
    if (this.classList.contains('is-active')){
      openNav();
    } else {
      closeNav();
    }
 }

对于点击页面关闭，我会尝试在菜单后面和页面内容上方添加一个“覆盖”。使其覆盖整个页面视图

---

然后，您可以向该按钮添加一个单击处理程序，方法与触发汉堡按钮单击的按钮相同。

请共享您的

CSS

代码或创建一个

jsfiddle

，以便我们可以帮助您。您的问题是什么？

 hamburger.addEventListener("click", function() {
    this.classList.toggle("is-active");
    if (this.classList.contains('is-active')){
      openNav();
    } else {
      closeNav();
    }
 }