javascript - 查询选择器选择不可见元素

Question

目前有一个网站使用 JavaScript 使 CSS 元素可见和不可见。一个元素在 HTML 中，另一个在 CSS 中。这是汉堡菜单。

试图关闭汉堡菜单在容器外点击/单击。

选择当前打开状态的问题在于它不是 HTML 中的有效元素。不确定如何找到解决此问题的方法。任何帮助是极大的赞赏。谢谢

document.querySelector('#menu-icon').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

document.querySelector('#close').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

window.addEventListener('mouseup', function(event){
    var menu = document.querySelector('.nav-open');
    if (event.target != menu && event.target.parentNode != menu){
        menu.style.display = 'none';
    }
});

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color:#000;
    font-family: 'EurostileBold', sans-serif;
}

#background{
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 999;
}

.nav-container {
    position:absolute;
    top:0px;
    left:-340px;
    width: -340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(-340px,0);
    -ms-transform: translateY(-340px,0);
    transition: all 0.5s;
}

.nav-open {
    position:absolute;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(340px,0);
    -ms-transform: translateY(340px,0);
    transition: all 0.5s;
}

.nav #close{
    position:absolute;
    top:35px;
    left:75px;
    width:20px;
    height:20px;
    background-size: 100% 100%;
    background-image:url(https://blacklist-rs.com/design/img/close.svg);
    background-repeat: no-repeat;
    cursor:pointer;
}

@media only screen and (max-width: 1280px) {
    .header #menu-icon{
        left: 35px;
        top: 46px;
        position: absolute;
        width: 30px;
        height: 30px;
        background-image:url(https://blacklist-rs.com/design/img/menu.svg);
        background-repeat: no-repeat;
        cursor:pointer;
    }   }

                <div class="header">
      <div id="menu-icon"></div>
                <div class="logo"></div>        
                <div class="nav">
                <div class="nav-container">
                    <div id="close"></div>
                    <div class="main-menu">
                    <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
        </ul></div>
    </div>
  </div>

标签： javascripthtmlcsshamburger-menu

Answer 1

如果修复了您的代码，则基于此答案。如果单击菜单项时不需要关闭菜单，则可以对其进行调整；）

const navContainer = document.querySelector('.nav-container');
const toggleMenu = (e, flag) => {
  e.stopPropagation();
  const isMenuShown = navContainer.classList
    .contains('nav-open');
  const shouldOpenMenu = flag === undefined 
    ? !isMenuShown
    : flag;
    
  navContainer.classList.toggle('nav-open', shouldOpenMenu);
};

window.addEventListener('click', (e) => toggleMenu(e, false));

document.querySelector('#menu-icon')
  .addEventListener('click', (e) => toggleMenu(e))

document.querySelector('#close')
  .addEventListener('click', (e) => toggleMenu(e));

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color:#000;
    font-family: 'EurostileBold', sans-serif;
}

#background{
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 999;
}

.nav-container {
    position:absolute;
    top:0px;
    left:-340px;
    width: -340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(-340px,0);
    -ms-transform: translateY(-340px,0);
    transition: all 0.5s;
}

.nav-open {
    position:absolute;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(340px,0);
    -ms-transform: translateY(340px,0);
    transition: all 0.5s;
}

.nav #close{
    position:absolute;
    top:35px;
    left:75px;
    width:20px;
    height:20px;
    background-size: 100% 100%;
    background-image:url(https://blacklist-rs.com/design/img/close.svg);
    background-repeat: no-repeat;
    cursor:pointer;
}

@media only screen and (max-width: 1280px) {
    .header #menu-icon{
        left: 35px;
        top: 46px;
        position: absolute;
        width: 30px;
        height: 30px;
        background-image:url(https://blacklist-rs.com/design/img/menu.svg);
        background-repeat: no-repeat;
        cursor:pointer;
    }   }

<div class="header">
  <div id="menu-icon"></div>
  <div class="logo"></div>        
  <div class="nav">
  <div class="nav-container">
    <div id="close"></div>
    <div class="main-menu">
      <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
      </ul>
    </div>
  </div>
</div>