我可以點擊目標元素中的鏈接：

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>