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显示/隐藏内容，我会使用复选框标签来切换状态。

＆＃13;

.clicker {
  font-size: 4em;
  cursor: pointer;
}

.hiddendiv, #checkbox {
  display: none;
}

input:checked + .hiddendiv {
  display: block;
}

＆＃13;

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

＆＃13;

但是如果你想在:target上触发它，你会这样做

＆＃13;

.clicker {
  font-size: 4em;
  cursor: pointer;
}

.hiddendiv {
  display: none;
}

.hiddendiv:target {
  display: block;
}

＆＃13;

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

＆＃13;

我可以单击：target元素中的链接

1 个答案: