css - 我可以点击 :target element 内的链接吗

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

我知道 focus 不允许我单击 .hiddendiv 元素中的链接，但 target 似乎也不起作用。我只想用 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>