关闭复选框汉堡包菜单，当在没有javascript/jquery的情况下在外部单击时

Question

我有汉堡菜单，我从这里拿的。https://codepen.io/erikterwan/pen/EVzeRP它只使用css，通过使用复选框来展开和折叠菜单。

所以我想要的是，当我点击菜单外(页面上的任何地方(时，菜单应该折叠。有人能帮我吗？

这是html代码

<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />

<span></span>
<span></span>
<span></span>

<ul id="menu">
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Info</li></a>
<a href="#"><li>Contact</li></a>
<a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a>
</ul>
</div>
</nav>

这是css代码

body
{
margin: 0;
padding: 0;

background: #232323;
color: #cdcdcd;
font-family: "Avenir Next", "Avenir", sans-serif;
}
#menuToggle
{
display: block;
position: relative;
top: 50px;
left: 50px;

z-index: 1;

-webkit-user-select: none;
user-select: none;
}
#menuToggle a
{
text-decoration: none;
color: #232323;

transition: color 0.3s ease;
}
#menuToggle a:hover
{
color: tomato;
}

#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;

cursor: pointer;

opacity: 0; 
z-index: 2; 

-webkit-touch-callout: none;
}
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;

background: #cdcdcd;
border-radius: 3px;

z-index: 1;

transform-origin: 4px 0px;

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;

background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;

transform-origin: 0% 0%;
transform: translate(-100%, 0);

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: none;
}

Answer 1

您可以使用扩展到整个宽度和高度的label，并位于nav:<label for="checkbox-id"></label>下方。您需要在复选框中添加一个id。请确保将标签背景设置为透明。

编辑：只有在选中#checkbox-id时才会显示标签。这可以只使用CSS来实现。您可能需要稍微重组一下HTML。TBH，您的实现可能比您从中汲取灵感的代码笔简单得多。如果你想了解更多细节，请在评论中告诉我。

Answer 2

我所做的是检测到一个元素外部的点击，并将复选框设置为false。

$(document).ready(function() {
$(document).on("click", function(event) {
if ($(event.target).closest("#checkbox").length === 0) {
$("#checkbox").prop("checked", false);
}
});
});