使用jQuery实现折叠菜单效果
以下是一个使用jQuery实现简单折叠菜单效果的示例代码：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠菜单示例</title>
<style>
.menu {
width: 200px;
border: 1px solid #000;
}
.menu-item {
padding: 10px;
cursor: pointer;
}
.menu-content {
display: none;
padding: 10px;
border-top: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item" data-target="item1">菜单项 1</div>
<div class="menu-item" data-target="item2">菜单项 2</div>
<div class="menu-item" data-target="item3">菜单项 3</div>
<div id="item1" class="menu-content">内容 1</div>
<div id="item2" class="menu-content">内容 2</div>
<div id="item3" class="menu-content">内容 3</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.menu-item').click(function() {
var target = $(this).data('target');
$('.menu-content').hide();
$('#' + target).show();
});
});
</script>
</body>
</html>这段代码实现了一个简单的折叠菜单效果。点击.menu-item后，通过其data-target属性指定的ID，显示对应的.menu-content内容区域，同时隐藏其他同级的内容区域。
评论已关闭