为了创建一个类似天猫左侧导航菜单的分类列表，你可以使用jQuery和HTML/CSS来实现。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿天猫左侧导航</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#nav {
width: 200px;
background-color: #f5f5f5;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
border-right: 1px solid #ddd;
}
.category {
padding: 10px;
cursor: pointer;
}
.sub-categories {
display: none;
padding-left: 20px;
}
.sub-category {
padding: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="nav">
<div class="category">电器
<div class="sub-categories">
<div class="sub-category">手机</div>
<div class="sub-category">电视</div>
<div class="sub-category">洗衣机</div>
</div>
</div>
<div class="category">服饰
<div class="sub-categories">
<div class="sub-category">男装</div>
<div class="sub-category">女装</div>
<div class="sub-category">童装</div>
</div>
</div>
<!-- 添加更多类别和子类别 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
// 显示/隐藏子类别
$('.category').click(function () {
$(this).children('.sub-categories').slideToggle();
});
// 处理子类别点击事件
$('.sub-category').click(function () {
alert('你点击了子类别：' + $(this).text());
});
});
</script>
</body>
</html>
在这个示例中，我们使用了HTML和CSS创建了一个简单的左侧导航栏结构，然后使用jQuery来处理点击事件，以展开或折叠子类别。你可以根据需要添加更多的类别和子类别，并在相应的地方修改代码。这只是一个基本的模板，你可以根据自己的需求进行定制。
本站资源均来源于互联网，仅限于学习研究，严禁从事商业或者非法活动！丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jquery仿天猫左侧导航菜单分类列表的产生方法
