用jQuery实现手风琴效果
作者：互联网
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
p {
text-align: center;
padding-top: 30px;
font-size: 18px;
color: orange;
}
.menu_qin {
margin: 10px auto;
width: 300px;
height: auto;
border: 1px solid #000000;
}
label {
display: block;
color: #fff;
background: #728bbb;
font-size: 14px;
padding: 10px 0 10px 25px;
border-bottom: 0.5px solid #97bdf4;
}
.qin_content {
display: none;
font-size: 15px;
padding: 10px 20px;
color: #35c628;
text-align: center;
}
</style>
</head>
<body>
<div class="menu_qin">
<ul>
<li>
<label class="qin selected1">内容显示 1</label>
<div class="qin_content">
长大以后 现在的我 常常会寂寞 <br />
偶尔缱绻 星星闪烁 剩最亮一颗 <br />
往事如风 划过夜空 你的歌 <br />
跳动音符 熟悉旋律 谁来合 <br />
</div>
</li>
<li>
<label class="qin selected2">内容显示 2</label>
<div class="qin_content" style="color: red">
长大以后 现在的我 忘记了快乐 <br />
人来人去 留在身边 的朋友不多 <br />
那些天真 纯纯的笑 哪去了 <br />
洁白翅膀 美丽天使 不见了 <br />
</div>
</li>
<li>
<label class="qin selected3">内容显示 3</label>
<div class="qin_content" style="color: blue">
曾经以为 世界很美 没人流眼泪 <br />
吹熄蜡烛 许个心愿 全都会实现 <br />
原来的我 怀念从前 是因为太留恋 <br />
懵懂的岁月中 只收藏了简单的笑脸 <br />
</div>
</li>
</ul>
</div>
</body>
</html>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(function () {
$(".qin").click(function () {
// console.log(this);
$(".qin_content").not($(this).next()).hide(500);
$(this).next().slideToggle(500);
// console.log($(this).index());
});
});
</script>标签：jQuery,qin,效果,color,padding,10px,手风琴,font,size 来源： https://blog.csdn.net/mahuatengbukui/article/details/118361546