web前端全系列 教程
1839个小节阅读:2244k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
xxxxxxxxxx
<html>
<head lang="en">
<meta charset="UTF-8">
<title>折叠面板</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0
}
.container {
width: 600px;
margin: 80px auto;
}
.container ul {
list-style: none
}
.container ul li h3 {
border-bottom: 1px solid black;
background-color: skyblue;
position: relative
}
.container ul li h3 span {
position: absolute;
right: 5px
}
.container ul li .cont {
display: none
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<h3>Section1<span>></span></h3>
<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu.
Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.
Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.
Curabitur molestie eros.</div>
</li>
<li>
<h3>Section2 <span>></span></h3>
<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu.
Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.
Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.
Curabitur molestie eros.</div>
</li>
<li>
<h3>Section3 <span>></span></h3>
<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu.
Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.
Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.
Curabitur molestie eros.</div>
</li>
</ul>
</div>
<script>
$('h3').click(function () {
if ($(this).siblings().is(':visible')) {
//如果是可见的,就把内容收起来
$(this).siblings().slideUp();
//变更符号
$(this).find('span').html('>');
} else {
//在展开当前标题的内容之前,先把其他内容收起来
$(this).parent().siblings().find('.cont').slideUp();
//如果是不可见的,把内容div显示
$(this).siblings().slideDown();
// 变更其他元素符号
$(this).parent().siblings().find('span').html('>');
//变更符号
$(this).find('span').html('v');
}
})
</script>
</body>
</html>