大佬教程收集整理的这篇文章主要介绍了纯CSS折叠/展开div,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我不能使用Javascript,因为这是一个wordpress.com网站不允许JS。
这是我的jfiddle:http://jsfiddle.net/dmarvs/94ukA/4/
<div class="FAQ"> <a href="#hide1" class="hide" id="hide1">+</a> <a href="#show1" class="show" id="show1">-</a> <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div> <div class="list"> <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p> </div> </div>
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */ .FAQ { vertical-align: top; height:auto !important; } .list { display:none; height:auto; margin:0; float: left; } .show { display: none; } .hide:target + .show { display: inline; } .hide:target { display: none; } .hide:target ~ .list { display:inline; } /*style the (+) and (-) */ .hide,.show { width: 30px; height: 30px; border-radius: 30px; font-size: 20px; color: #fff; text-shadow: 0 1px 0 #666; text-align: center; text-decoration: none; box-shadow: 1px 1px 2px #000; BACkground: #cccbbb; opacity: .95; margin-right: 0; float: left; margin-bottom: 25px; } .hide:hover,.show:hover { color: #eee; text-shadow: 0 0 1px #666; text-decoration: none; box-shadow: 0 0 4px #222 inset; opacity: 1; margin-bottom: 25px; } .list p{ height:auto; margin:0; } .question { float: left; height: auto; width: 90%; line-height: 20px; padding-left: 20px; margin-bottom: 25px; font-style: italic; }
<details> <sumMary>This is what you want to show before expanding</sumMary> <p>This is where you put the details that are shown once expanded</p> </details>
Browser support varies.尝试webkit以获得最佳效果。其他浏览器可能默认显示所有解决方案。你可以回退到上面描述的hide / show方法。
以上是大佬教程为你收集整理的纯CSS折叠/展开div全部内容,希望文章能够帮你解决纯CSS折叠/展开div所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。