Question

我为我正在处理的应用程序创建了一个很好的CSS菜单，它通过使用复选框和同级选择器激活。

问题：点击链接并不关闭菜单（它是单页应用，所以没有页面重新加载）

尝试的解决方案：尝试在菜单链接内部或周围创建标签，并使用＆＃34; for＆＃34;属性指向原始菜单按钮。这会关闭每个链接点击的菜单（取消选中复选框），但打开的链接不会触发。

<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>

CSS导航使用＆＃34;输入：选中＆＃34;使用辅助标签取消选中原始输入时，不会触发内部链接href

1 个答案: