1

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

我的 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>

我使用的相关 CSS 代码是：

.menu_hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;} */
.menu_hidden_checkbox:checked +.left-menu{display:block;}

上面的代码根本不起作用。当复选框被选中时，没有任何反应。

我做错了什么吗？

JSFiddle： http: //jsfiddle.net/P8DJZ/（展开行查看全屏/智能手机模式）

4

1 回答 1

0

这是解决方案：

将开关按钮放在您想要的任何地方：

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

将此代码放在要显示/隐藏的 div 之前：

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

例如，如果您想隐藏此 div，只需执行以下操作：

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

然后在您的 CSS 文件中，添加以下代码：

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

第一行将隐藏复选框，因此用户只能使用您的切换按钮，而不能直接使用复选框。第二行将隐藏您的div. 第三行和最后一行是将您的DIV显示器更改为block仅在检查何时何地hidden_checkbox进行检查的条件。

基本上，当用户点击切换按钮时，隐藏的复选框将被选中并hidden_div出现。如果他再次点击按钮，hidden_div应该会消失。

我希望这可以帮助某人。

于 2013-11-21T10:09:14.663 回答