使用纯css单击复选框时关闭div

Question

我试图关闭一个div，当单击一个复选框时，css只是没有JQuery或Javascript，但它似乎无法正常工作。我该怎么调整呢？

＆＃13;

＆＃13;

    div[id^="div-"] {
     	display: block;
    }
    div[id^="div-"]:target {
	    display: none;
    }

＆＃13;

    <a href="#div-1"><input type="checkbox" checked></a>
    <div id="div-1">          
         Here is the content. 
    </div>

＆＃13;

＆＃13;

＆＃13;

如何关联<a>点击和复选框？

Answer 1

#text{
  width:100px;
  height:100px;
  background:black;
}
input[type=checkbox]:checked ~ #text{
display:none;
 
}

<input type="checkbox" name="check" value="checked">Click here<br>
<div id="text"></div>

Answer 2

只使用CSS就可以做到这一点。

JSFiddle

+是相邻的兄弟选择器，更多信息来自https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

#close + #div-1 {
    display: none;
}

#close:checked + #div-1 {
    display: initial;
}

<input id="close" type="checkbox" checked />
<div id="div-1">Here is the content.</div>

Answer 3

我认为使用纯css执行此操作的唯一方法是将复选框作为div的直接兄弟：

#div-1 {display:none}
#checkbox:checked + #div-1 {display:block;}

<input id="checkbox" type="checkbox" checked>
<div id="div-1">          
     Here is the content. 
</div>

Answer 4

首先你应该删除锚点，然后让输入元素，因为我显示的这个技巧需要同一级别的元素或第二个元素处于较低级别的html结构。

<input type="checkbox" checked>
<div id="div-1">          
     Here is the content. 
</div

css

div[id^="div-"] {
    display: block;
}


input:checked ~ div[id^="div-"] {
    display: none;
}

jsfiddle