使用工具：关注私聊获取编译软件+源代码

功能演示

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* //将内边距,外边距设置为0 .默认都是存在外边距内边距的 */
			* {
				padding: 0px;
				margin: 0px;
				list-style: none;
				margin: auto;
			}

			/* //设置一级列表的宽度,背景 */
			.lii {
				background-color: yellow;
				width: 110px;
				border-right: 1px solid;
				border-left: 1px solid;
			}

			/* //设置二级列表的框线,宽,背景 */
			.ul li {
				border: 1px solid;

				width: 110px;
				background-color: red;
			}
		</style>
		<!-- //加载jquery文件 -->
		<script type="text/javascript" src="js/jquery-3.4.1.js">

		</script>
		<script type="text/javascript">
			//文档就绪函数
			$(function() {
				//一级列表的点击事件
				$(".lii").click(function() {
					//slideToggle是slideUp() 和 slideDown() 之间的切换：
					//children()子元素，点击区域的子元素上滑消失或下滑出现
					$(this).children().stop().slideToggle(500);
				})
			})
		</script>
	</head>
	<body>
		<div id="d">
			<!-- 无序列表 -->
			<ul id="li">
				<!-- 一级列表001 -->
				<li class="lii">一级列表001
					<!-- 二级列表001 -->
					<ul class="ul">
						<li>二级列表001-1</li>
						<li>二级列表001-2</li>
						<li>二级列表001-3</li>
						<li>二级列表001-4</li>
						<li>二级列表001-5</li>
					</ul>
				</li>
				<!-- 一级列表002 -->
				<li class="lii">一级列表002
					<!-- 二级列表002 -->
					<ul class="ul">
						<li>二级列表002-1</li>
						<li>二级列表002-2</li>
						<li>二级列表002-3</li>
						<li>二级列表002-4</li>
						<li>二级列表002-5</li>
					</ul>
				</li>
				<!-- 一级列表003 -->
				<li class="lii">一级列表003
					<!-- 二级列表003 -->
					<ul class="ul">
						<li>二级列表003-1</li>
						<li>二级列表003-2</li>
						<li>二级列表003-3</li>
						<li>二级列表003-4</li>
						<li>二级列表003-5</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

0基础学编程，纯干货，关注【一只联动猫】不迷路

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

jQuery入门案例:显示或隐藏动画(导航栏)

功能演示

代码如下