1. 事先说明

事先说明,此代码比较简短所以并没有美化,所以css需要自己再补一些。

另外,我比较菜。。刚进入前端,只能用vue、avue和element做一点公司的crud,勿喷

2. 做法过程

bootstrap折叠

主要使用的是上面链接的功能。

代码:

    <div>
		<!-- 侧边栏标签页 -->
		<ul class="nav nav-pills nav-stacked">
			<!-- 侧边栏选项 -->
			<li role="presentation" class="active">
				<!-- 选项控制data-target对应的显隐 -->
				<a href="#" data-toggle="collapse" data-target="#list">商品管理</a>
				<!-- 隐藏的详细菜单 -->
				<ul id="list" class="collapse in">
					<li>
						<a href="">
							操作一
						</a>
					</li>
					<li><a href="">操作二</a></li>
				</ul>
			</li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>
	</div>

应该都能看懂

引用了bootstrap3  参考了bootstrap3中文文档

算是很简短了,主要利用菜鸟教程上面写的折叠将ul折叠起来了,通过点击控制折叠与否。

data-target要对应ul的id  此处我也不懂,应该是类似vue中的 :data 绑定吧

 

贴一下全部代码:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<!-- css -->
	<link rel="stylesheet" type="text/css" href="admin.css"/>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<title>
		E-SHOP
	</title>
</head>

<body class="loginBgColor">
	
	<div>
		<!-- 侧边栏标签页 -->
		<ul class="nav nav-pills nav-stacked">
			<!-- 侧边栏选项 -->
			<li role="presentation" class="active">
				<!-- 选项控制data-target对应的显隐 -->
				<a href="#" data-toggle="collapse" data-target="#list">商品管理</a>
				<!-- 隐藏的详细菜单 -->
				<ul id="list" class="collapse in">
					<li class="active">
						<a href="">
							操作一
						</a>
					</li>
					<li><a href="">操作二</a></li>
				</ul>
			</li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>
	</div>
	
	
	<script type="text/javascript">
		
	</script>
</body>

</html>

实验的时候可以把我引入的自己的css去掉,在这个页面中我只在body处加了一个background-color。

Logo

前往低代码交流专区

更多推荐