我可以点击目标元素中的链接:
问题描述:
所以我有下面的代码。我可以点击目标元素中的链接:
<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来构建它。有小费吗?
答
如果你想通过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>
正是我需要的。谢谢! – Remco