折叠效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
var lastFaqClick=null;//上次点击的faq
window.onload=function(){
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "faq_dt_"+(Math.random()*100);
dt.onclick=function(){
var p=this.parentNode;//取得父节点
if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
}
lastFaqClick=this;
var dds=p.getElementsByTagName("dd");//取得该父节点所有的子节点,也就是所有的答案
var tmpDisplay='none';
if (gs(dds[0],'display')=='none')
tmpDisplay='block';
for (var i=0;i<dds.length;i++)
dds[i].style.display=tmpDisplay;
}
}
}
/**
*取得元素的真实css属性
*written in 06.7 sheneyan
*/
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
</script>
<style type="text/css">
*,html,body{margin:0;padding:0}
#faq dt{font-weight:bold;cursor:pointer}
#faq dd{display:none;}
</style>
</head>
<body>
<ul id="faq">
<li>
<dl><dt>问题1 </dt><dd>答:1 </dd></dl>
</li>
<li>
<dl><dt>问题2 </dt><dd>答:2 </dd></dl>
</li>
<li>
<dl><dt>问题3 </dt><dd>答:3 </dd></dl>
</li>
<li>
<dl><dt>问题4 </dt><dd>答:4 </dd></dl>
</li>
</li>
</ul>
</body>
</html>
分享到:
相关推荐
如果你曾今使用过iphone手机,那你一定为它的面板折叠效果所震惊。这款插件就是模拟了iphone手机面板折叠的css3折叠效果。图片能像纸一样从两边往中间折叠,然后显示所有图片的缩略图。
jquery右侧滑动折叠效果导航菜单,右侧滑动折叠效果导航菜单
折叠效果侧边栏,炫酷侧边栏 折叠效果侧边栏,炫酷侧边栏 折叠效果侧边栏,炫酷侧边栏 折叠效果侧边栏,炫酷侧边栏 折叠效果侧边栏,炫酷侧边栏 折叠效果侧边栏,炫酷侧边栏 折叠效果侧边栏,炫酷侧边栏 折叠效果侧...
使用bootstrap,配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后,显示+号,再次点击,伸展表格中的内容,并显示-号
Python3.x+Pyqt5实现界面左侧导航栏的抽屉效果(折叠效果);界面和业务分离案例01_自己写的,有UI界面源代码
js 实现 div的折叠效果! 值得下载看看!资源免费,大家分享!!
此demo可使用单层RecyclerView实现item的点击展开、折叠效果
OC 实现的一款 Cell 折叠效果。.zip,Cell折叠动效(OC实现)
CSS+JS实现一个DIV层的展开折叠效果,自己总结出来的,两天才解决的问题,分享出来,大家项目学习,交流。欢迎评论、指导
Tableview实现基础的折叠效果,点击展开点击折叠
可以实现缩入折叠,翻转折叠效果,很不错哦!
android使用CollapsingToolbarLayout实现折叠效果
ToolBar折叠效果,用于自我回顾,为什么老是限制资源分?
实现TableView自定义Cell折叠效果
JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容。
NULL 博文链接:https://121036081.iteye.com/blog/2127047
通过自定义tableView的组标题视图实现tableView的折叠效果
CSS3实现的图片堆栈效果,...当鼠标悬停在图片上后,原本折叠起来的图片分别向左右散开,像扇子一样的效果,或者渐变放大效果。图片带有阴影,高版本浏览器下,如火狐等浏览器下均可实现,IE等低版本浏览器下效果不佳
折叠效果的 UICollectionView Swift Controller
列表折叠效果.pptx,PPTfans_0401