响应式菜单无法在 IE 11 上打开

Question

为什么这个 JS 代码在 IE11 中不起作用？汉堡菜单打不开。以为是 onclick 的问题，尝试通过 addEventListener 解决，还是不行。

//

我尝试使用 Babel，它没有改变任何东西，只添加了 "use strict"。

//

IE11不支持toggle？ It says这里只表示不支持第二个参数

//

你能告诉我如何让代码工作吗？

document.querySelector(".animated-icon2").onclick = function (e) {
  e.preventDefault(); 
  this.classList.toggle("open"); 
  document.querySelector(".sidebar-main").classList.toggle("show");
};

.sidebar-main{
  display:none;
}
.sidebar-main.show{
  display: block;
}
.mobile-menu{
  position: absolute;
  background-color: transparent;
  border: none;
  outline: 0;
  top: 25px;
  right: 50%;
  display: block;
  z-index: 7;
}
/*animated icon*/
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon2 span {
background: #000;
}

.animated-icon2 span:nth-child(1) {
top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}

.animated-icon2 span:nth-child(4) {
top: 20px;
}

.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

<header>
    <button class="mobile-menu"><div class="animated-icon2"><span></span><span></span><span></span><span></span></div></button>
    <div class="sidebar-main">
  <h1>Header</h1>
  </div>
</header>

Answer 1

这可能有效：

将此添加到 HTML 文件的顶部。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

由于某种原因，您的页面可能被强制设置为 IE 兼容模式，这使其表现得像旧版本的 IE。添加元标记会强制其返回 IE11 模式。

Answer 2

以下 JS 代码适用于 IE11。 onclick 事件是为 IE11 中 HTML 结构中的按钮元素执行的。

document.querySelector(".mobile-menu").onclick = function (e) {
    e.preventDefault();
    document.querySelector(".animated-icon2").classList.toggle("open");
    document.querySelector(".sidebar-main").classList.toggle("show");
};

.sidebar-main{
  display:none;
}
.sidebar-main.show{
  display: block;
}
.mobile-menu{
  position: absolute;
  background-color: transparent;
  border: none;
  outline: 0;
  top: 25px;
  right: 50%;
  display: block;
  z-index: 7;
}
/*animated icon*/
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon2 span {
background: #000;
}

.animated-icon2 span:nth-child(1) {
top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}

.animated-icon2 span:nth-child(4) {
top: 20px;
}

.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

<header>
    <button class="mobile-menu"><div class="animated-icon2"><span></span><span></span><span></span><span></span></div></button>
    <div class="sidebar-main">
  <h1>Header</h1>
  </div>
</header>

响应式菜单无法在 IE 11 上打开

Responsive menu not opening on IE 11

javascript

internet-explorer-11