js实现内容的缩放

最新推荐文章于 2023-04-26 09:19:10 发布

章浅浅

最新推荐文章于 2023-04-26 09:19:10 发布

阅读量529

点赞数

分类专栏： javaScript 文章标签： js nextSibling

本文链接：https://blog.csdn.net/zhang_qian_qian123/article/details/38257233

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近写了一个小功能，主要是通过点击一张图片内容展开，再点击一次内容展开，方便用户浏览分块数据显示，代码如下

<head>

    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>

章浅浅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现内容的缩放

最近写了一个小功能，主要是通过点击一张图片内容展开，再点击
复制链接

扫一扫

专栏目录