menu

click outter

by leftstick

HTML

<button class="showBtn">显示菜单</button>
<div class="menu">
  <ul>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
  </ul>
</div>

CSS

.menu {
  display: none;
  background-color: #fff;
  width: 100px;
}

.show {
  display: block;
}

JavaScript

document
.querySelector('.showBtn')
.addEventListener('click', function(e){
    document.querySelector('.menu').classList.add('show');
    e.stopPropagation();
}, false);

document
.querySelector('.menu')
.addEventListener('click', function(e){
    e.stopPropagation();
}, false);

document
.addEventListener('click', function(){
    document.querySelector('.menu').classList.remove('show');
}, false);