封装一个万能展开收起

星之海丶

已于 2024-04-12 11:56:03 修改

阅读量320

点赞数 10

分类专栏： JS封装方法文章标签： css 前端 js jquery

于 2024-03-26 11:12:13 首次发布

本文链接：https://blog.csdn.net/weixin_46094786/article/details/137038703

版权

JS封装方法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原理为展开时内容撑起父元素高度，收起时设定父元素高度并且超出隐藏,此方法可无限嵌套

在这里插入图片描述

上代码

<style>
	.down {
        width: 20px;
        float: right;
        margin: 7px 10px 0 0;
    }

    .up {
        transform: rotate(180deg);
    }

    .liyar {
        height: auto;
        overflow: hidden; // 父元素必须设置Y轴超出隐藏 否则无效 
    }
</style>
    function changestatus(self,className) {  //接收icon本身 以及icon原本的className
    	//这里因为展开收起的ICON是通过旋转写的 可以省一张图片
    	//如果是两张图片的话需要修改下 替换图片链接  或者让点击的图片隐藏另一个block
    	// 这里也可以直接让icon旋转180度 但是不判断我个人感觉不稳妥
        if (self.className == className) {
            self.className = className + ' up'
        } else {
            self.className = className
        }
		
		//主题展开收起
        if ($(self).parent().parent()[0].style.height == '35px') {
            $(self).parent().parent()[0].style.height = 'auto'
        } else {
            $(self).parent().parent()[0].style.height = '35px'
        }
    }