チェックボックス - トリックが機能しない

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 { 
 
\t \t 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を使用してください。