我可以点击目标元素中的链接：

Question

所以我有下面的代码。

<nav> 
<div class="clicker" tabindex="1">menu</div> 
<div class="hiddendiv"> <a href="/register/register">Register</a> 
<a href="/account/login">Login</a></div> 
</nav> 

与下面的CSS

nav{ margin-top: -70px; 
} .clicker { font-size: 4em; outline:none; cursor:pointer; float:right;  border-padding:4px; border-right: 5px solid #ed2024; } 

.hiddendiv{ display:none; width:300px; font-size: 2em; background-color:#ed2024; float:left; padding:5px; } 

.clicker:focus + .hiddendiv{ display:block; } 

.clicker:focus{ display:block; float:left; 
} 

.hiddendiv a{ float: left; 
margin-left: 10px; 
} 

我明白，焦点不会让我点击.hiddendiv元素中的链接，但目标似乎没有任何工作。我只想用CSS来构建它。有小费吗？

Answer 1

如果你想通过CSS显示/隐藏内容，我会使用复选框标签来切换状态。

.clicker { 
 
    font-size: 4em; 
 
    cursor: pointer; 
 
} 
 

 
.hiddendiv, #checkbox { 
 
    display: none; 
 
} 
 

 
input:checked + .hiddendiv { 
 
    display: block; 
 
}

<nav> 
 
    <label class="clicker" tabindex="1" for="checkbox">clicker</label> 
 
    <input id="checkbox" type="checkbox"> 
 
    <div class="hiddendiv"> <a href="/register/register">Register</a> 
 
    <a href="/account/login">Login</a></div> 
 
</nav>

但是，如果要触发它:target你会做这样的

.clicker { 
 
    font-size: 4em; 
 
    cursor: pointer; 
 
} 
 

 
.hiddendiv { 
 
    display: none; 
 
} 
 

 
.hiddendiv:target { 
 
    display: block; 
 
}

<nav> 
 
    <div class="clicker" tabindex="1"><a href="#hiddendiv">menu</a></div> 
 
    <div class="hiddendiv" id="hiddendiv"> <a href="/register/register">Register</a> 
 
    <a href="/account/login">Login</a></div> 
 
</nav>