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

您正在使用＆＃34; + ＆＃34;这是sibling CSS selector，但<h1>不是您的复选框的兄弟。它是复选框的父容器的兄弟。你可以有3种方法去处理它。

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第三种方式：使用javascript。