⽤JS简单实现⼀个折叠⼿风琴效果
效果如图所⽰，此时⿏标所在的位置背景⾊是⿊⾊，第三个标签没有展开。
全部代码如下所⽰：（直接复制运⾏）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>⾃⼰试着写</title>
<style>
/* 打开和关闭⼿风琴⾯板的样式 */
.accordion{
background-color: bisque;
color: blue;
cursor: pointer;
width: 100%;
padding: 18px;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* 设置点击和⿏标悬停的样式 */
.accordion:hover{
background-color: aquamarine;
}
.active:hover{
background-color: black;
}
/
* 为⼿风琴⾯板设置样式，默认隐藏 */
.panel{
padding: 0 18px;
background-color: blue;
max-height: 0;
overflow: hidden;
transition: max-height 0.9s ease-out;
}
/* 设置 + -标志 */
.accordion::after{
content: '\002B';
color: red;
margin-right: 5px;
font-weight: bolder;
float: right;
}
.active::after{
content: "\2212";
}
</style>
</style>
</head>
<body>
<button class="accordion">第⼀个标签</button>
<div class="panel">
<p>1111111</p>
</div>
<button class="accordion">第⼆个标签</button>
<div class="panel">
<p>2222</p>
js制作简单的焦点图效果</div>
<button class="accordion">第三个标签</button>
<div class="panel">
<p>33333</p>
</div>
<script>
var acc = ElementsByClassName("accordion");        var i;
for(i=0;i<acc.length;i++){
acc[i].addEventListener("click",function(){
le("active");
var panel = ElementSibling;
if(panel.style.maxHeight){
panel.style.maxHeight = null;
}else{
panel.style.maxHeight = panel.scrollHeight + "px"
}
});
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。