当用户点击链接或菜单外部时，我该如何关闭此复选框菜单？

Question

我需要知道当用户单击链接或菜单外部时，如何关闭此菜单。我目前的猜测是，当用户单击链接或菜单背景区域之外时，使用js或jquery取消选中复选框可能是最好的方法，但我对javascript不太了解，所以我不知道如何做lol。 代码：

#mobilemenu {
  position: fixed;
  background-color: red;
  background-size: cover;
  top: 0px;
  right: -50%;
  height: 100%;
  width: 50%;
  z-index: 0;
  transition: .5s;
}

#mobilemenu ul {
  text-align: right;
  margin-right: .5em;
  margin-top: 3em;
  list-style-type: none;
  font-size: 1.25em;
}

#menuicon {
  position: fixed;
  z-index: 4;
  right: 9px;
  margin-top: 15px;
}

#menuicon i {
  cursor: pointer;
  background-color: white;
  font-size: 12pt;
  padding: 3px;
  font-weight: bold;
  color: black;
}

input[type="checkbox"]:checked~#mobilemenu {
  transform: translateX(-100%);
}

input {
  display: none;
}

<input type="checkbox" id="myInput">
<label for="myInput">
          <nav id="menuicon">
            <i>Menu</i>
        </nav>
      </label>
<aside id="mobilemenu">
  <ul>
    <li>
      <a href="#">Link1</a>
    </li>
    <li>
      <a href="#">Link2</a>
    </li>
    <li>
      <a href="#">Link3</a>
    </li>
    <li>
      <a href="#">Link4</a>
    </li>
  </ul>
</aside>

- gabriel0369

Answer 1

由于jQuery是有害的，您可以使用原生JS。
定义复选框和图标：

var checkbox = document.querySelector( '#myInput' );
var icon = document.querySelector( '#menuicon i' );

然后，将事件侦听器添加到您的复选框。如果复选框被选中，则将事件侦听器添加到文档：

checkbox.addEventListener( 'click', function(){
  if( this.checked ) {
    document.addEventListener( 'click', listener );
  } 
});

如果您点击菜单按钮以外的任何元素，请将checked属性设置为false。并从文档中删除事件监听器，因为在重新打开菜单之前我们不需要它：

var listener = function( e ) {
  if( e.target != checkbox && e.target != icon ) {
    checkbox.checked = false;
    document.removeEventListener( 'click', listener );
  }
};

最终代码：

var checkbox = document.querySelector( '#myInput' );
var icon = document.querySelector( '#menuicon i' );
var listener = function( e ) {
  if( e.target != checkbox && e.target != icon ) {
    checkbox.checked = false;
    document.removeEventListener( 'click', listener );
  }
};

checkbox.addEventListener( 'click', function(){
  if( this.checked ) {
    document.addEventListener( 'click', listener );
  } 
});

#mobilemenu {position: fixed;
background-color: red;
  background-size: cover;
  top: 0px;
  right:-50%;
  height: 100%;
  width:50%;
  z-index: 0;
    transition: .5s;
}
#mobilemenu ul {
  text-align: right;
  margin-right: .5em;
  margin-top: 3em;
  list-style-type: none;
  font-size:1.25em;
}
#menuicon{position: fixed;
  z-index: 4;
  right: 9px;
  margin-top:15px;
}
#menuicon i {
  cursor: pointer;
background-color: white;
font-size: 12pt;
padding:3px;
  font-weight: bold;
  color: black;
}
input[type="checkbox"]:checked ~ #mobilemenu{
  transform: translateX(-100%);
}
input{
  display:none;
}

<input type="checkbox" id="myInput">
<label for="myInput">
  <nav id="menuicon">
    <i>Menu</i>
  </nav>
</label>
<aside id="mobilemenu">
  <ul>
    <li>
      <a href="#">Link1</a>
    </li>
    <li>
      <a href="#">Link2</a>
    </li>
    <li>
      <a href="#">Link3</a>
    </li>
    <li>
      <a href="#">Link4</a>
    </li>
  </ul>
</aside>

- fiter

---

非常感谢兄弟！！！那正是我所需要的！当我点击背景时，菜单会关闭，所以我认为如果用户在链接之外意外地点击了一下，这可能会影响到其他东西，所以我只是添加了这两行代码： var bg = document.querySelector( '#mobilemenu' ); if( e.target != checkbox && e.target != icon && e.target != bg ) { 非常感谢你，你是老板!!! - gabriel0369