隐藏仅使用CSS显示内容列表，不使用JavaScript [英] Hide Show content-list with only CSS, no javascript used
问题描述
我一直在寻找一个好的技巧，使一个隐藏/显示内容或一个只有CSS和没有javascript的列表。
我已经设法执行此操作：
I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I've managed to make this action:
<!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/
它的工作，但不是因为它应该。这里是问题：
当显示内容时，您可以通过单击页面上的任何位置来隐藏它。如何禁用？如何隐藏内容只通过单击隐藏？
提前谢谢！
Demo here: http://jsfiddle.net/6W7XD/ And it's working but not as it should. Here is the problem: When the content is shown, you can hide it by clicking "anywhere on the page". How to disable that? how to hide content "only" by clicking hide? Thank you in advance!
推荐答案
我不会使用复选框，我会使用你已经有的代码
I wouldn't use checkboxes, i'd use the code you already have
DEMO 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>
这种方式只有在点击hide元素时才隐藏文本
This way the text is only hidden on click of the hide element
这篇关于隐藏仅使用CSS显示内容列表，不使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
