CSS 选择器 - 使用 "input:checked" 的 CSS 导航在使用辅助标签取消选中原始输入时不会触发内部链接 href

Question

>我已经为我正在开发的应用程序创建了一个不错的CSS菜单，它是通过使用复选框和同级选择器激活的。

问题：单击链接不会关闭菜单（这是一个单页应用程序，因此不会重新加载页面）

尝试

的解决方案：尝试在菜单链接内部或周围创建标签，"for"属性指向原始菜单按钮。这将在每次单击链接时关闭菜单（取消选中复选框），但随后打开的链接不会触发。

<label for="btn">menu btn</label>
<input id="btn" type="checkbox"/>
<ul>
    <li>
        <a href="http://google.com/" target="_blank">
            <label for="btn">link 1</label>
        </a>
    </li>
    <li>
        <a href="http://google.com/" target="_blank">
            <label for="btn">link 2</label>
        </a> 
    </li>
</ul>
<style>
/* important styles */
ul {
    opacity: 0;
}
#btn:checked + ul {
    opacity: 1;
}
</style>

在这里摆弄：

http://jsfiddle.net/gebi/4nzLa9yh/

有什么想法吗？

Answer 1

如果您在同一

选项卡中打开链接，我希望这会有所帮助。

<a href="#ul" class="menu_btn"> Menu Btn</a>
<ul id="ul">
  <li>
    <a href="#">link 1</a>
  </li>
  <li>
    <a href="#">link 2</a>
  </li>
</ul>
<style>
ul {
    display: none;
}
#ul:target {
    display: block;
}

</style>