addEventListener 在第一次点击时不起作用

Question

This code is for opening and closing an accordion menu, but the event I added to 'acc' does not work on the first click.

 let acc = document.getElementById("acc"); let list = document.getElementById("list"); let rest = document.getElementById("rest"); let nav = document.getElementById("nav"); let line = document.getElementsByClassName("line") acc.addEventListener("click", () => { if (list.style.left == '-50%') { list.style.left = "0"; Array.prototype.forEach.call(line, function(value, index) { line[index].style.backgroundColor = "lightBlue"; }); } else { list.style.left = "-50%"; Array.prototype.forEach.call(line, function(value, index) { line[index].style.backgroundColor = 'rgba(0, 0, 0, 0.781)'; }); } }); rest.addEventListener("click", () => { list.style.left = "-50%"; Array.prototype.forEach.call(line, function(value, index) { line[index].style.backgroundColor = 'rgba(0, 0, 0, 0.781)'; }); })

 <nav class="nav" id="nav"> <p class="header">koooooooooooooon</p> <button class="accordion" id="acc"> <div class="wrap"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </button> </nav> <div class="list" id="list"> <ul class="ul"> <li><a href="#">home</a></li> <li><a href="konkor.html">konkor</a></li> <li><a href="arshad.html">konkor arshad</a></li> <li><a href="nahaii.html">emtehan nahaii</a></li> </ul> </div> <div class="rest" id="rest"> <p class="p">welcome to our lil app</p> </div>

I couldn't think of any other way to do this.

Answer 1

For this syndrome the tipical problem is: CSS overrides. If you hide by default via css class your menu, then in the first click the script will detect the oposit what you think it will. Set the initial value in the style attribute, or use classes to determinate the current state of the elements. A little explanation: if you use only pure JavaScript, it won't take care about the style settings which you set on the Element with classes. It only returns those style which are directly set on the element with the style attribute.

ie. You set via css the Left property of the element to -50%. The JavaScript will return "" if you call the style.left because it can't detect the CSS class' value. Then on second click it will work properly and it will return -50% than 0 than again -50% . This will be invisible because, the style attribute will be set to a value on first click which is the default value you set with a class previously.

Also I want to note, this is not true in case of jQuery. If you using jQuery it detects somehow the attributes on the Elements , which was applied via classes.