我一直在寻找一个很好的技巧来制作一个隐藏/显示内容或列表,只有CSS和没有javascript。
我已经设法做出这个动作:
我已经设法做出这个动作:
<!DOCTYPE html> <head> <style> #cont {display: none; } .show:focus + .hide {display: inline; } .show:focus + .hide + #cont {display: block;} </style> </head> <body> <div> <a href="#show"class="show">[Show]</a> <a href="#hide"class="hide">/ [Hide]</a> <div id="cont">Content</div> </div> </body> </html>
演示:http://jsfiddle.net/6W7XD/
它的工作,但不是应该的。这是问题:
显示内容时,您可以通过单击“页面上的任何位置”来隐藏内容。如何禁用?如何隐藏内容“只”点击隐藏?
先谢谢你!
解决方法
我不会使用复选框,我会使用你已经有的代码
演示http://jsfiddle.net/6W7XD/1/
CSS
body { display: block; } .span3:focus ~ .alert { display: none; } .span2:focus ~ .alert { display: block; } .alert{display:none;}
HTML
<span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert" >Some alarming information here</p>
这样,文本只能隐藏在隐藏元素的点击上
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。