Checkbox-Trick无法正常工作

Question

我想使用复选框技巧来显示我的移动导航栏。不知何故，即使检查了不可见的复选框，h1也不显示。我做错了什么？

#label {
  margin-left: auto;
  margin-right: auto;
  color: #000000;
  font-size: 35px;
  cursor: pointer;
  width: 47px;
}


h1 {
display: none
}
#toggle {
  display: none;
}


#toggle:checked + h1 {
		display: block;
}
  

<div id="hamburgermenu">
  <label id="label" for="toggle">&#9776;</label>
  <input id="toggle" type="checkbox">
</div>

<h1>DEMO ELEMENT</h1>

Answer 1

你正在使用“+”这是一个sibling CSS selector，但<h1>不是你的复选框的兄弟。它是复选框的父容器的兄弟。你可以有3种方法去做。

第一种方式：将其放入输入中，使其成为输入的兄弟

#label {
  margin-left: auto;
  margin-right: auto;
  color: #000000;
  font-size: 35px;
  cursor: pointer;
  width: 47px;
}

h1 {
  display: none
}

#toggle {
  display: none;
}

#toggle:checked+h1 {
  display: block;
}

<div id="hamburgermenu">
<label id="label" for="toggle">&#9776;</label>
<input id="toggle" type="checkbox">

<h1>DEMO ELEMENT</h1>
</div>

第二种方式：通过从容器中取出输入，使其成为输入的兄弟

#label {
  margin-left: auto;
  margin-right: auto;
  color: #000000;
  font-size: 35px;
  cursor: pointer;
  width: 47px;
}

h1 {
  display: none
}

#toggle {
  display: none;
}

#toggle:checked + h1 {
  display: block;
}

<div id="hamburgermenu">
<label id="label" for="toggle">&#9776;</label>
</div>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>

第三种方式：利用javascript。