使用 JS 从 html 元素中删除 class

Question

我已经为从元素中删除添加的 class 苦苦挣扎了 2 天。翻遍了整个网络，还是找不到问题的答案。

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

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

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

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');        
    }    
})

Answer 1

window函数中的目标元素不是按钮，是link。您应该检查它。我修改了你的fiddle所以你可以检查它

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

Answer 2

对于这种情况，存在一个 (DOM) contains 函数。你可以这样使用：

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.toggle("dropdown--active");    
}) 



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

此外，services__dropdown__container 是 class 而不是 id。

使用 JS 从 html 元素中删除 class

Removing class from html element with JS

javascript

dom-events