Question

用户GGG已经给了我一个如何使用CSS显示和隐藏内容的示例（here）。

但是当我尝试将其改编到我的网站时，它失败了。这是how I´ve modified it。

问题是每个复选框都有一个css id，每个复选框都应该在选中时显示不同的东西。显示/隐藏的内容有一个css类，它不与复选框（example）相邻。

我该如何调整该代码？到目前为止，我所尝试的并没有奏效......

非常感谢您的见解！谢谢！

Rosamunda

Answer 1

更新

DEMO以使用通用兄弟选择器而不是相邻的兄弟选择器

CSS：

/*styled relative to the label*/
label {display:block;}
label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;}
label ~ input[type="checkbox"]:checked ~ div {display:inline;}

HTML：

<label>Box 1:</label>
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-131" type="checkbox">
<div class="tipo-uf-131">Box 1 is checked.</div>
<br>

<label>Box 2:</label>
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-134" type="checkbox">
<div class="tipo-uf-134">Box 2 is checked.</div>
<br>

<label>Box 3:</label>
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-130" type="checkbox">
<div class="tipo-uf-130">Box 3 is checked.</div>

Answer 2

它不起作用，你必须将每个答案放在div中像这样：

<style>
label {display:block;}
label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;}
label ~ input[type="checkbox"]:checked ~ div {display:inline;}
</style>
<div>
<label>Box 1:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 1 is checked.</div>
</div>
<div>
<label>Box 2:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 2 is checked.</div>
</div>
<div>
<label>Box 3:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 3 is checked.</div>
</div>

根据使用CSS的复选框显示/隐藏内容：为什么此代码不起作用？

2 个答案: