Question

我正在向菜单添加基本功能。每当单击按钮时，由于使用Javascript的CSS类，菜单都会从显示切换到隐藏。

但是，当我尝试将此功能与window.addEventListener结合使用时，若要在外部单击上关闭菜单，它将无法正常工作。背后的原因是什么？

这是代码。

<div class="c-wrapper">
  <button type="button" class="c-btn"> Click Me</button>
  <ul class="c-navigation">
    <li><a href="#">Hi there</a></li>
    <li><a href="#">Hello</a></li>
    <li><a href="#">Hola</a></li>
    <li><a href="#">Konichiwa</a></li>
  </ul>
</div>

谢谢。

.c-wrapper{
  position:relative;
}

.c-btn{
  background-color:royalblue;
  border:none;
  color:white;
  padding:0.5rem 2rem;
  cursor:pointer;
  outline:none;
}


.c-navigation{
  list-style:none;
  background-color:#ccc;
  position:absolute;
  margin:0;
  padding:0;
  display:none;


  li{
    margin-top:0.5rem;
  }

  a{
    text-decoration:none;
    color:black;
    padding:1.4rem;
  }
}


.is-active{
  display:block;
}

这是我要提到的Javascript。

var button = document.querySelector('.c-btn');

button.addEventListener('click', function(){
  document.querySelector('.c-navigation').classList.toggle('is-active');
});

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

Answer 1

尝试一下。

// Get the menu
var menu = document.getElementById('menu');

// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
  if (event.target === menu) {
    menu.style.display = "none";
  }
})

最好避免通过JS操作样式。最好将一个类添加到菜单。

menu.classList.add('hidden');

然后将.hidden类样式添加到CSS。

.hidden {
    display: none;
}

关闭外部点击菜单，使用纯JavaScript

1 个答案: