CSS3菜单复选框黑客，任意点击后隐藏菜单

Question

背景

我正在为移动设备设计菜单，并试图完全避免使用JS。我正在使用复选框hack来显示和隐藏菜单，这是有效的。

问题

我希望在点击链接时隐藏菜单。现在这不起作用。

当前代码

.toggle + a, .menu {
    display:none;
    z-index:10;
}
.toggle {
    display:block;
    padding:0 20px;
    font-size:20px;
    line-height:20px;
    text-decoration:none;
    border:none;
    padding:none;
}
.toggle img {
    width:5%;
    float:right;
    padding:0;
}
[id ^= drop]:checked + ul {
    display: block;
}
ul {
    width:100%;
}
ul li {
    display:block;
    width:50%;
    margin-left:50%;
    border-bottom:1px solid rgba(63, 63, 63, 1);
    background:gray;
}
li:hover a {
    border-bottom:none;
    transform:none;
}
ul li a {
    width:90%;
    text-align:right;
}

<div id="nav">
    <label for="drop" class="toggle"><img src="images/menu_icon.png" alt="logo" /></label>
    <input type="checkbox" id="drop" />

    <ul class="menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#design">Design</a></li>
        <li><a href="#location">Location</a></li>
        <li><a href="#terms">Terms</a></li>
        <li><a href="#gallery">Gallery</a></li>
    </ul>
</div>

Answer 1

快速回答

不幸的是，这是不可能的。你需要一些JS来创建你想要的确切效果。

无JS的近似逼近

如果移动整个菜单并在label元素内输入，则应该关闭该菜单上的任何单击。我在下面的片段中完成了这个。

问题是点击实际的a元素似乎没有触发标签。这很奇怪，因为根据this，它应该，并且人们关心防止它。它可能是浏览器特定的。

.toggle + a, .menu {
    display:none;
    z-index:10;
}
.toggle {
    display:block;
    padding:0 20px;
    font-size:20px;
    line-height:20px;
    text-decoration:none;
    border:none;
    padding:none;
}
.toggle img {
    width:5%;
    float:right;
    padding:0;
}
[id ^= drop]:checked + ul {
    display: block;
}
ul {
    width:100%;
}
ul li {
    display:block;
    width:50%;
    margin-left:50%;
    border-bottom:1px solid rgba(63, 63, 63, 1);
    background:gray;
}
li:hover a {
    border-bottom:none;
    transform:none;
}
ul li a {
    width:90%;
    text-align:right;
}

<div id="nav">
		<label for="drop" class="toggle">
            <img src="http://retailadvocates15.nrf.com/sites/all/themes/nrf_events/images/mobile_menu_icon.gif" alt="logo" />
            <input type="checkbox" name="drop" id="drop" />
            <ul class="menu">
                <li><a href="#home" class="smoothScroll">Home</a></li>
                <li><a href="#about" class="smoothScroll">About</a></li>
                <li><a href="#design" class="smoothScroll">Design</a></li>
                <li><a href="#location" class="smoothScroll">Location</a></li>
                <li><a href="#terms" class="smoothScroll">Terms</a></li>
                <li><a href="#gallery" class="smoothScroll">Gallery</a></li>
                <li><a href="#contact" class="smoothScroll">Contact</a></li>
            </ul>
        </label>