jQuery 手风琴菜单是一种常见的网页交互效果,它允许用户通过点击或悬停来展开和折叠内容区域。手风琴菜单通常用于显示和隐藏信息,以节省页面空间并提高用户体验。
以下是一个简单的 jQuery 手风琴菜单的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Accordion Menu</title>
<style>
.accordion-menu {
width: 300px;
}
.accordion-menu h3 {
cursor: pointer;
padding: 10px;
background-color: #f1f1f1;
}
.accordion-menu div {
padding: 10px;
background-color: #fff;
display: none;
}
</style>
</head>
<body>
<div class="accordion-menu">
<h3>Menu Item 1</h3>
<div>
Content for Menu Item 1
</div>
<h3>Menu Item 2</h3>
<div>
Content for Menu Item 2
</div>
<h3>Menu Item 3</h3>
<div>
Content for Menu Item 3
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.accordion-menu h3').click(function() {
$(this).next('div').slideToggle(200);
$(this).siblings('h3').next('div').slideUp(200);
});
});
</script>
</body>
</html>
slideToggle(200)
中的 200
改为更大的数值。touchstart
事件替代 click
事件,并确保样式在不同设备上都能良好显示。通过以上示例代码和解决方法,你应该能够实现一个基本的 jQuery 手风琴菜单,并解决常见的相关问题。
没有搜到相关的文章