在手风琴上创建打开和关闭状态的方法如下:
<div>
或<section>
等HTML元素来表示每个折叠项。以下是一个简单的手风琴示例:
HTML代码:
<div class="accordion">
<div class="accordion-item">
<h3 class="accordion-title">折叠项 1</h3>
<div class="accordion-content">
<p>折叠项 1 的内容</p>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-title">折叠项 2</h3>
<div class="accordion-content">
<p>折叠项 2 的内容</p>
</div>
</div>
</div>
CSS代码:
.accordion-item {
margin-bottom: 10px;
}
.accordion-title {
background-color: #eee;
padding: 10px;
cursor: pointer;
}
.accordion-content {
display: none;
padding: 10px;
background-color: #f5f5f5;
}
JavaScript代码(使用jQuery UI实现):
$(function() {
$(".accordion-title").click(function() {
var $item = $(this).parent();
// 关闭其他折叠项
$(".accordion-item").not($item).find(".accordion-content").slideUp();
// 切换当前折叠项的显示状态
$item.find(".accordion-content").slideToggle();
});
});
以上代码中,点击折叠项的标题时,使用slideToggle()
方法切换对应内容部分的显示和隐藏。通过not()
方法和slideUp()
方法来关闭其他折叠项。
云+社区开发者大会(苏州站)
TVP技术夜未眠
GAME-TECH
云原生正发声
北极星训练营
云+社区技术沙龙[第6期]
领取专属 10元无门槛券
手把手带您无忧上云