HTML：选中复选框后，元素不可见

Question

我的html代码的标题中有一个复选框，正文中有一个框。 选中复选框时，我需要该框消失。

我将在下面提供代码，但总之，我可以使复选框本身在被选中时消失，但是当我添加要消失的元素的类时，它完全无法工作。 我尝试了几种不同形式的CSS，但是没有任何改变。

 #toggle:checked ~ div .sidebar{ display:none; } .sidebar { width: 100px; height: 100px; background: #000; } 

 <nav class="navbar"> <div class="container"> <div class="navbar-header"> <label for="toggle" class="sidebar-toggle"></label> </div> <input type="checkbox" id="toggle" /> </div> </nav> <div class="sidebar"> </div> 

Answer 1

CSS选择器#toggle:checked ~ div .sidebar有一个小的错字。 div和.sidebar之间应该没有空格，因为您的目标是选择“类名为sidebar的div ”（而不是“类名为sidebar是div的子元素的任何元素”）。

另一个问题是您在CSS选择器中错误地使用了Adjacent Sibling Combinator 。 为了使您的选择器正常工作， div.sidebar应该是与#toggle元素相同的父#toggle子级。

 #toggle:checked ~ div.sidebar { display: none; } .sidebar { width: 100px; height: 100px; background: #000; } 

 <nav class="navbar"> <div class="container"> <div class="navbar-header"> <label for="toggle" class="sidebar-toggle"></label> </div> <input type="checkbox" id="toggle" /> <div class="sidebar"></div> </div> </nav> 

Answer 2

假设您无法更改HTML结构，因为您试图更改不是该复选框的同级或后代的“ div”，则需要使用javascript来做到这一点。

 function handleChange(checkbox) { if (checkbox.checked == true) { document.getElementsByClassName("sidebar")[0].classList.add("hidden");; } else { document.getElementsByClassName("sidebar")[0].classList.remove("hidden");; } } 

 .sidebar.hidden { display: none; } .sidebar { width: 100px; height: 100px; background: #000; } 

 <nav class="navbar"> <div class="container"> <div class="navbar-header"> <label for="toggle" class="sidebar-toggle"></label> </div> <input type="checkbox" id="toggle" onchange='handleChange(this)' /> </div> </nav> <div class="sidebar"> </div>