以下是html代码:
<div class="wrapper">
<div class="menu-wrap">
<ul>
<li>
<input type="radio" id="link1" />
</li>
</ul>
</div>
<div class="content-wrap">
<div id="link1-content"><p>Just a paragraph</p></div>
</div>
</div>
以下是css代码:
#link1:checked ~ #link1-content { display: none;}
我正在尝试使用input [type = radio]创建css click。我的问题是兄弟选择器不起作用。
如何编写适当的兄弟选择器?
答案 0 :(得分:2)
你正在尝试做兄弟选择器做不到的事情。您将无法设置#link1-content
样式,因为它与#link1:checked
不共享同一个父项。
正如@sirko所说,这是应该用Javascript / JQuery完成的(参见下面的我的代码片段)。
<强>来源 Child and Sibling selectors -- CSS Tricks
请注意,在一般兄弟和相邻兄弟选择器中,逻辑发生在同一父元素中。
一个非常简单的jQuery解决方案:
$('#link1').change(function(){
$('#link1-content').toggle();
});