查询关闭选择上的动画汉堡按钮答案

【问题标题】：Animate hamburger button on query close selection查询关闭选择上的动画汉堡按钮
【发布时间】：2021-01-30 02:43:38
【问题描述】：

我有一个带有动画按钮的下拉菜单，现在我已经做到了，以便在单击内容包装容器 div 时可以关闭下拉菜单，但问题是它不考虑动画按钮返回平仓，下面是我的 HTML 和 J 的代码

function myFunction(x) {
/* This controls the animating function */
 x.classList.toggle("change");
/* This controls the menu close and open */
 var x = document.getElementById('Menu-cont');
if (x.style.height === "230px") {
        x.style.height = "0px";

    } else {
        x.style.height = "230px";
    }
}
/* This is a way to close menu click a container wrapper div */
document.querySelector('.content-wrapper').addEventListener('click', function(){ closeNav(); })
function closeNav() { 
var x = document.getElementById('Menu-cont').style.height = "0px"; 
}

我希望动画按钮在单击包装 div 后动画回关闭

这是动画 html 和 css

<div class="menu-icon" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>



.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

【问题讨论】：

标签： javascript html css animation drop-down-menu

【解决方案1】：

你可以把myFunction(x)改成

function myFunction() {
  var x = document.getElementById("my-icon")
  x.classList.toggle("change");

  var y = document.getElementById('Menu-cont');
  if (y.style.height === "230px") {
     y.style.height = "0px";

  } else {
     y.style.height = "230px";
  }
}

和closeNav()函数

function closeNav() { 
   //actually you don't need this function. Just call myFunction
   myFunction();
}

并将id 添加到您的.my-icon div

<div class="menu-icon" id="my-icon" onclick="myFunction()">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</div>

【讨论】：

Mustafa 谢谢你，但它只是使图标动画化，并不一定关闭导航。 ?
我在使用这个 document.querySelector('.content-wrapper').addEventListener('click', function(){ closeNav();}) function closeNav() { var x = document.getElementById('Menu-cont').style.height = "0px"; var y = document.getElementById('my-icon').classList.toggle("change"); }。唯一的问题是单击内容包装器 div 制作图标切换

【解决方案2】：

做了更多的挖掘，这解决了问题 var y = document.getElementById('my-icon').classList.remove("change"); }

【讨论】：