jQuery 扁平手风琴是一种常见的网页交互效果,它允许用户通过点击或悬停在一个元素上展开或折叠其子元素。这种效果通常用于导航菜单、选项卡或其他需要层次结构的界面元素。下面是一个简单的 jQuery 扁平手风琴代码示例:
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header">Section 1</button>
<div class="accordion-content">
<p>Content for section 1 goes here.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">Section 2</button>
<div class="accordion-content">
<p>Content for section 2 goes here.</p>
</div>
</div>
<!-- 更多部分... -->
</div>
.accordion-content {
display: none;
}
.accordion-content.active {
display: block;
}
$(document).ready(function() {
$('.accordion-header').on('click', function() {
// 获取当前点击的标题下的内容
var content = $(this).next('.accordion-content');
// 切换内容的显示状态
content.toggleClass('active');
// 如果当前内容展开,则关闭其他所有内容
if (content.hasClass('active')) {
$('.accordion-content').not(content).removeClass('active');
}
});
});
.accordion-content
初始状态为 display: none;
。通过上述代码和解释,你应该能够实现一个基本的 jQuery 扁平手风琴效果,并理解其背后的概念和应用场景。
没有搜到相关的文章