我创建了一个菜单div,单击鼠标即可在其下方显示/隐藏另一个div。但是,我需要菜单div上的箭头才能单击。您知道箭头将如何指向侧面,但是单击菜单div并显示其他div时会向下切换。我下面有CSS代码和HTML。
PS:我只需要使用CSS。
CSS:
.drop {
cursor: pointer;
display: block;
background: #090;
}
.drop + input{
display: none; /* hide the checkboxes */
}
.drop + input + div{
display:none;
}
.drop + input:checked + div{
display:block;
}
排队:
<label class="drop" for="_1">Collapse 1 </label>
<input id="_1" type="checkbox">
<div>Content 1</div>
感谢您的帮助!
您将不得不更改结构并使用伪指令插入箭头:
例子
.drop {
cursor: pointer;
display: block;
background: #090;
}
input[type="checkbox"] {
display: none; /* hide the checkboxes */
}
input +.drop + div
{
display:none;
}
.drop:after {
content:'▼';
}
:checked + .drop:after {
content:'▲';
}
input:checked + .drop + div{
display:block;
}
<input id="_1" type="checkbox">
<label class="drop" for="_1">Collapse 1 </label>
<div>Content 1</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句