h5开发网站-使用jquery来实现二层嵌套的左侧列表，点击后显示右侧内容的效果

一、需求：

使用jquery来实现二层嵌套的左侧列表，点击后显示右侧内容的效果。
在这里插入图片描述

二、思路：

为一级列表项和二级子列表项分别添加了点击事件处理程序。
当一级列表项被点击时，使用.slideToggle()方法展开或收起对应的二级子列表项。
当二级子列表项被点击时，使用event.stopPropagation()方法阻止事件冒泡，并根据data-target属性的值获取对应的右侧内容元素，并使用.show()方法将其显示出来，同时隐藏其他右侧内容元素。

三、代码：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="js/jquery.min.js">script>
		<style>
			.container {
				display: flex;
			}

			.left-panel {
				width: 30%;
				background-color: #f2f2f2;
			}

			.left-list {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			.list-item {
				padding: 10px;
				cursor: pointer;
			}

			.sub-list {
				list-style: none;
				padding: 0;
				margin: 10px 0 0 20px;
			}

			.sub-item {
				padding: 5px;
				cursor: pointer;
			}

			.right-panel {
				flex: 1;
				background-color: #fff;
			}

			.content {
				display: none;
				padding: 20px;
			}
		style>
	head>
	<body>
		<div class="container">
			<div class="left-panel">
				<ul class="left-list">
					<li class="list-item">
						项目1
						<ul class="sub-list">
							<li class="sub-item" data-target="content1">子项目1li>
							<li class="sub-item" data-target="content2">子项目2li>
							<li class="sub-item" data-target="content3">子项目3li>
						ul>
					li>
					<li class="list-item">
						项目2
						<ul class="sub-list">
							<li class="sub-item" data-target="content4">子项目4li>
							<li class="sub-item" data-target="content5">子项目5li>
							<li class="sub-item" data-target="content6">子项目6li>
						ul>
					li>
					<li class="list-item">
						项目3
						<ul class="sub-list">
							<li class="sub-item" data-target="content7">子项目7li>
							<li class="sub-item" data-target="content8">子项目8li>
							<li class="sub-item" data-target="content9">子项目9li>
						ul>
					li>
				ul>
			div>
			<div class="right-panel">
				<div class="content" id="content1">
					1
				div>
				<div class="content" id="content2">
					2
				div>
				<div class="content" id="content3">
					3
				div>
				<div class="content" id="content4">
					4
				div>
				<div class="content" id="content5">
					5
				div>
				<div class="content" id="content6">
					6
				div>
				<div class="content" id="content7">
					7
				div>
				<div class="content" id="content8">
					8
				div>
				<div class="content" id="content9">
					9
				div>
			div>
		div>
		<script>
			$(document).ready(function() {
			  $('.list-item').click(function() {
			    $(this).siblings().find('.sub-list').slideUp();
			    $(this).find('.sub-list').slideToggle();
			  });
			
			  $('.sub-item').click(function(event) {
			    event.stopPropagation();
			    var target = $(this).data('target');
			    $('.content').hide();
			    $('#' + target).show();
			  });
			});
		script>

	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

OK完成

在这里插入图片描述

相关阅读:
FFmpeg源代码简单分析-编码-av_write_trailer()
DPDK的VFIO
「Redis」01 NoSQL及Redis概述
 运动耳机选择哪种好用、市面上最受欢迎的运动耳机推荐
 Power Apps-“编辑“窗体组件
 图形库篇 | EasyX | 图像处理
 Scala重要知识
 nio epoll空轮询bug与netty的解决方案
 Kafka进阶
 文法与正规式
原文地址：https://blog.csdn.net/weixin_48596030/article/details/132742284