最近写了一个小功能,主要是通过点击一张图片内容展开,再点击一次内容展开,方便用户浏览分块数据显示,代码如下
<head>
<script type="text/javascript">
function closeList(obj){
var aId = obj.getAttribute("id");
var nextDiv = findNextNode(obj.parentNode.parentNode.nextSibling);
if(aId == 'close') {
nextDiv.style.display="block";
obj.innerHTML = '<i class="ace-icon fa fa-chevron-down"></i>';
obj.setAttribute("id","open");
}else{
nextDiv.style.display="none";
obj.innerHTML = '<i class="ace-icon fa fa-chevron-up"></i>'; //这是一个向上展开的标签
obj.setAttribute("id","close");
}
}
//寻找下一个节点,nextNode可能会得到元素节点也可能得到文本节点,所以要进行筛选
function findNextNode(nextNode) {
if(nextNode.nodeType == 1) {
return nextNode;
}else{
return findNextNode(nextNode.nextSibling);
}
}
</script>
</head>
<body>
<div>
<!-- 第一块-->
<span class="timeline-label" style="text-align:left;width:100%">
<a href="javascript:void(0)" οnclick="closeList(this)" id="open">
<i class="ace-icon fa fa-chevron-down"></i> //这是一个向下展开的标签
</a>
</span>
<div >
很多内容1111
</div>
<!-- 第二块-->
<span class="timeline-label" style="text-align:left;width:100%">
<a href="javascript:void(0)" οnclick="closeList(this)" id="open">
<i class="ace-icon fa fa-chevron-down"></i> //这是一个向下展开的标签
</a>
</span>
<div >
很多内容222
</div>
</div>
</body>