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之间应该没有空格，因为您的目标是选择“类名称为div的{{1}}（而不是“类名称为{{1 }}是sidebar“的子代。

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

div.sidebar

#toggle

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>

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

2 个答案: