时间戳

首页 > 解决方案 > 使用 JS 从 html 元素中删除类

javascript - 使用 JS 从 html 元素中删除类

问题描述

我已经为从元素中删除一个添加的类而苦苦挣扎了 2 天。查遍了整个网络，但找不到问题的答案。

我可以在导航中添加一个类并显示可以正常工作的子菜单。

然后，当用户单击窗口中的任何位置时，我想再次隐藏菜单，但是一旦我键入删除类的代码，它就根本不起作用。我只使用 Vanilla JS 而没有先看 jquery 来掌握 JS。

非常感谢您，在网上找不到任何解决方案！

https://jsfiddle.net/dx6ofnvs/4/

HTML

 <nav> 
  <div class="nav__navigation">
    <ul>
      
      <li id="services__btn"> <a href="#"> Leistungen</a></li>
        <div class="services__dropdown__container">
          <ul id="services__dropdown" class="dropdown">
              <li> <a href="#"> Link one</a></li>
              <li> <a href="#"> Link two</a></li>
              <li> <a href="#"> link three</a></li>
              <li> <a href="#"> link four</a></li>
           
          </ul> 
        </div>
      
   
    
    </ul>
  </div>
  
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>

</nav>

CSS


const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav__navigation");
const navLinks = document.querySelectorAll(".nav__navigation li");
const servicesBtn = document.querySelector("#services__btn");
const servicesDropdown = document.querySelector("#services__dropdown");
const servicesDropdownContainer = document.querySelector("#services__dropdown__container")
const html = document.querySelector("html")

///// Open Mobile Menu

burger.addEventListener("click", (navSlide));

function navSlide() {
    nav.classList.toggle("nav-active");
}



///// Open Dropdown Desktop Width
 servicesBtn.addEventListener("click", (e) => {
    servicesDropdown.classList.add("dropdown--active");    
}) 



window.addEventListener("click", (e) => {      
    if(e.target != servicesDropdown) {

/// I think this code ist the problem that it removes the class immedeatly after shown

        servicesDropdown.classList.remove("dropdown--active")
        console.log('clicked');        
    }    
})

标签： javascriptdom-events

解决方案

窗口函数中的目标元素不是按钮，是链接。你应该检查它。我修改了你的小提琴，所以你可以检查一下

    <li id="services__btn"> <a class="button" href="#"> Leistungen</a></li>

...

window.addEventListener("click", (e) => {
    let button = document.querySelector(".button");
        if(e.target !== button && servicesDropdown.classList.contains("dropdown--active")) {
            servicesDropdown.classList.remove("dropdown--active")
            console.log('clicked');        
        }
        console.log('e', e.target);
})

https://jsfiddle.net/ft2om9ak/1/

推荐阅读