我一直在寻找一个很好的技巧来制作一个隐藏/显示内容或只有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/ 并且它正在工作但不是应该的.问题出在这里:当显示内容时,您可以通过单击"页面上的任意位置"来隐藏它.如何禁用它？如何通过单击隐藏"仅"隐藏内容？先感谢您!