Question

我有一个隐藏/显示div的复选框。当我将复选框直接放在div上方时，它可以工作。当我将复选框放在页面中的其他位置时（为了更好的可用性），它不起作用。有没有办法定位某个div以使复选框在页面的任何位置都起作用？

以下是HTML代码：

<input type="checkbox" id="toggle-result" checked="checked">  </input>

CSS：

input[type=checkbox]:checked ~ div {
   display: none;
}

Answer 1

使用CSS，您可以选择子元素和相邻元素，因此如果div放在复选框后面，但是如果您希望在div时使其工作，那么您尝试执行的操作将有效在其他地方（在复选框上方），您需要使用JavaScript，如果它在之后，您可以使用+来选择相邻元素或嵌套相邻元素

Demo

<input type="checkbox" />
<div>Toggle Using CSS</div>

input[type=checkbox]:checked + div {
    display: block;
}

div {
    display: none;
}

将div定位在距离某处较远的地方（但不是checkbox之前）

Demo 2

input[type=checkbox]:checked + a + .blah .target {
    display: block;
}

.target {
    display: none;
}

<input type="checkbox" />
<a href="#">Dummy Link</a>

<div class="blah">
    <div class="target">Complicated Selector, Isn't It?</div>
</div>

说明：input[type=checkbox]:checked + a + .blah .target结束在这里，我们选择处于检查状态的复选框，而不是我们通过选择作为锚标签的相邻元素来链接它，而且我们选择了与a相邻的另一个相邻元素带有div的{{1}}标记，而我们选择带有类.blah的嵌套子元素

使用jQuery Do Do（无论目标元素在哪里）Demo 3

.target

Answer 2

input[type=checkbox]:checked ~ div {
   display: none;
}

将选中前面带有div的每个input元素。它可能中断的原因是因为输入不在div之前（就像你在问题中说的那样）

Answer 3

使用选择器中的元素ID：

<input type="checkbox" id="toggle-result" checked="checked"/>

<div id="myDiv">showme</div>

<style>
    #toggle-result:checked ~ #myDiv {
        display: none;
    }
</style>

目标div带有一个复选框

3 个答案: