Question

我有一个带有动画按钮的下拉菜单，现在我已经做到了，因此可以在单击内容包装容器 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);
}

Answer 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>

Answer 2

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

查询关闭选择时动画汉堡按钮

2 个答案: