Html CSS中的显示条件

我想为我的响应式设计创建一个菜单按钮。 我想在用户单击按钮时显示菜单，在用户单击后退时隐藏菜单

我的Html代码如下所示：

<!-- Invisible checkbox -->
<input type="checkbox" class="menu_hidden_checkbox" id="show_menu" role="button" />

<!-- Menu button -->
<label for="show_menu" class="btn btn-navbar"><i class="icon-align-justify"></i></label>

上面的代码根本不起作用。选中该复选框时，不会发生任何事情

我做错什么了吗

JSFiddle：（展开行以查看全屏/智能手机模式）

以下是解决方案：

将开关按钮放在您想要的任何位置：

<label for="show_hide">Click here to hide/show the div</label>

第一行将隐藏复选框，因此用户只能使用切换按钮，而不能直接使用复选框。第二行将隐藏您的

div

。 第三行也是最后一行是一个条件，当且仅当选中

隐藏\u复选框时，该条件会将div显示更改为
block

基本上，当用户单击开关按钮时，将选中隐藏复选框，并显示
hidden_div
。如果他再次单击该按钮，则
隐藏的\u div
将消失

我希望这能帮助一些人。
你能把代码放到JSFIDLE中吗？你好。我已经用JSFIDLE链接编辑了我的问题。CSS中的+运算符用于相邻的兄弟姐妹。左菜单与隐藏的复选框不相邻。如果将隐藏的复选框放在我的左菜单之前：但它仍然不起作用。嗯，那么我担心你的小提琴中的其他东西会把事情搞砸。当我删除除复选框和左菜单div之外的所有内容时，它会起作用：
<label for="show_hide">Click here to hide/show the div</label>

<input type="checkbox" class="hidden_checkbox" id="show_hide" />

<input type="checkbox" class="hidden_checkbox" id="show_hide" />
<div class="hidden_div">
    Your hidden content will be there.
</div>

.hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}
.hidden_div{display:none;}
.hidden_checkbox:checked + .hidden_div{display:block;}