IE11 上 eventListener 的 JS 问题 - 幻灯片导航不起作用

Question

i'm very new on the javascript field and i have a big problem. I worked on it the last 7 days and i can't find a solution.

I hope that anyone could tell me the code to solve this problem.

The following snippet show's my navigation. It work's fine on chrome, firefox but not on the IE11 - and it must worked on it.

It don't opened on IE11.

I tried the attachEvent function, but i didn't find the right code.

I'm very thankful for every help. It would be a pleasure if anybody could tell me the little code part.

Thank you!!

 const toggleButton = document.querySelector('.toggle-menu'); const navBar = document.querySelector('.nav-bar'); toggleButton.addEventListener('click', () => { navBar.classList.toggle('toggle'); });

 .nav-bar { position: fixed; z-index: 1; background-color: red; top: 0; left: -100%; height: 100%; width: auto; display: flex; justify-content: center; align-items: center; transition: 0.5s ease-out; padding: 2%; } .toggle { left: 0; box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4); } .toggle-menu { background-color: white; position: fixed; top: 1rem; left: 1rem; width: 3.5rem; height: 3rem; display: flex; flex-direction: column; justify-content: space-around; padding: 0.2rem 0.5rem; border-radius: 0.5rem; overflow: hidden; background-clip: padding-box; border: 3px solid black; cursor: pointer; } .line { width: 100%; height: 4px; border-radius:5px; background-color: #000; transition: 0.2s ease-out; } .toggle .line1 { background-color: #e30513; transform: scale(0.9) rotateZ(-45deg) translate(-8px, 8px); } .toggle .line2 { display: none; } .toggle .line3 { background-color: #e30513; transform: scale(0.9) rotateZ(45deg) translate(-7px, -8px); } .toggle .toggle-menu { background-color: white; border: 0; } .nav-list { list-style: none; padding: 0; line-height: 0.5; } .nav-list-item { text-align: left; padding: 1rem 0; } .nav-list-item a:hover{ color: white; } .nav-link { color: #fff; font-size: 1.3rem; text-decoration: none; position: relative; padding-bottom: 0.4rem; } .nav-list-item a:hover{ color: white; } .nav-link::before { position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff; transform: scaleX(0); transition: 0.4s ease-in-out; transform-origin: left; } .nav-link:hover::before { transform: scaleX(1); }

 <div class="navigation"> <nav class="nav-bar"> <div class="toggle-menu"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> </div> <ul class="nav-list"> <li class="nav-list-item"><a href="page1.html" class="nav-link">Link 1</a></li> <li class="nav-list-item"><a href="page2.html" class="nav-link">Link 2</a></li> </ul> </nav> </div>

Answer 1

Try to replace your arrow function with a regular function as IE11 doesn't support arrow functions.

const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', function () {
  navBar.classList.toggle('toggle');
});

Answer 2

I agree with the suggestion provided by Acidic9 regarding the arrow functions.

Arrow functions not supported in the IE browser and your JS code uses the arrow functions.

While running the code in the IE browser it will show the syntax error.

To fix the issue you need to remove the arrow function from your JS code.

Below is your problematic code:

toggleButton.addEventListener('click', () => {
  navBar.classList.toggle('toggle');
});

It needs to replace with the code below will fix the issue.

toggleButton.addEventListener('click', function () {
  navBar.classList.toggle('toggle');
});

Here is the full modified code:

 var toggleButton = document.querySelector('.toggle-menu'); var navBar = document.querySelector('.nav-bar'); toggleButton.addEventListener('click', function () { navBar.classList.toggle('toggle'); });

 .nav-bar { position: fixed; z-index: 1; background-color: red; top: 0; left: -100%; height: 100%; width: auto; display: flex; justify-content: center; align-items: center; transition: 0.5s ease-out; padding: 2%; } .toggle { left: 0; box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4); } .toggle-menu { background-color: white; position: fixed; top: 1rem; left: 1rem; width: 3.5rem; height: 3rem; display: flex; flex-direction: column; justify-content: space-around; padding: 0.2rem 0.5rem; border-radius: 0.5rem; overflow: hidden; background-clip: padding-box; border: 3px solid black; cursor: pointer; } .line { width: 100%; height: 4px; border-radius:5px; background-color: #000; transition: 0.2s ease-out; } .toggle .line1 { background-color: #e30513; transform: scale(0.9) rotateZ(-45deg) translate(-8px, 8px); } .toggle .line2 { display: none; } .toggle .line3 { background-color: #e30513; transform: scale(0.9) rotateZ(45deg) translate(-7px, -8px); } .toggle .toggle-menu { background-color: white; border: 0; } .nav-list { list-style: none; padding: 0; line-height: 0.5; } .nav-list-item { text-align: left; padding: 1rem 0; } .nav-list-item a:hover{ color: white; } .nav-link { color: #fff; font-size: 1.3rem; text-decoration: none; position: relative; padding-bottom: 0.4rem; } .nav-list-item a:hover{ color: white; } .nav-link::before { position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff; transform: scaleX(0); transition: 0.4s ease-in-out; transform-origin: left; } .nav-link:hover::before { transform: scaleX(1); }

 <div class="navigation"> <nav class="nav-bar"> <div class="toggle-menu"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> </div> <ul class="nav-list"> <li class="nav-list-item"><a href="page1.html" class="nav-link">Link 1</a></li> <li class="nav-list-item"><a href="page2.html" class="nav-link">Link 2</a></li> </ul> </nav> </div>

Output in the IE 11 browser: