提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

原生态js单个点击展开收缩和jQuery的写法

jQueryJS 点击 写法 展开 单个 收缩
2023-09-14 08:58:23 时间 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin:0; padding:0;}
		.box{ width: 600px; margin: 0 auto; }
		.p1{ width: 200px; height: 30px; line-height: 30px; text-align: center; background: #B73A3A; color: #fff;}
		.content{ border:1px solid #ddd; width: 180px; height: 200px; padding:10px; display: none;}
	</style>
</head>
<body>
<div class="box">
	<p class="p1" onclick="var oDiv = document.getElementById('J_content');(oDiv.style.display == 'block')?(oDiv.style.display = 'none'):(oDiv.style.display = 'block')" >点击</p>
	<div class="content" id="J_content">
		<p>了更健康的就感慨了结果聊看看发几个六块腹肌刚看了发几个及关联方寄过来的加工费</p>
	</div>
</div>
	
</body>
</html>

　　如图所示：

展开效果图：

 第二：jQuery的写法：

html:

<div class="result_list_more" id="showMore"><a href="javascript:void(0)">展开全部</a></div>

js：

$(function(){
    let dnum = 0;
    let showMore = $("#showMore");//更多
    let resultList = $("#resultList"); //外层
    showMore.find("a").on("click",function(){
        dnum = dnum + 1;
        if(dnum % 2 != 0){
            resultList.css("height", "auto");
            $(this).addClass("result_rotate").html("收起全部")
        }else{
            resultList.css("height", "1rem");
            $(this).removeClass("result_rotate").html("展开全部")
        }
    })
})

css:

/* 展开更多 */
.result_list_more{ height: 0.5rem; line-height: 0.5rem; background-color: #fff; overflow: hidden; text-align: center}
.result_list_more a{ position: relative; display: inline-block; text-indent: -0.2rem; font-size: 0.18rem;}
.result_list_more a::after{ content: ""; position: absolute; right: -0.2rem; top:0.158rem; font-size: 0.18rem;
width: 0.1rem; height: 0.1rem; border-top:2px solid #333; border-right: 2px solid #333;
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg);}
.result_list_more .result_rotate::after{top:0.24rem;
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);}

效果图：

 

相关文章