我想为我的响应式设计创建一个菜单按钮。 我想在用户单击按钮时显示菜单,并在用户单击返回时隐藏它。
我的 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/ (展开行以查看全屏/智能手机模式)
最佳答案
解决方法如下:
把你的开关按钮放在任何你想放的地方:
<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
。
第三行也是最后一行是一个条件,当且仅当选中 hidden_checkbox
时,才会将您的 div 显示更改为 block
。
基本上,当用户点击切换按钮时,隐藏的复选框将被选中,hidden_div
将出现。如果他再次点击该按钮,hidden_div
应该会消失。
我希望这可以帮助某人。
关于html - CSS 中的显示条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19360111/