jquery实现左侧多级折叠菜单点击显示相应内容效果代码-html代码-BFW代码库

jquery实现左侧多级折叠菜单点击显示相应内容效果代码

代码语言：html

代码描述：jquery实现左侧多级折叠菜单点击显示相应内容效果代码，鼠标点击根据titile名字显示相应的内容。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
    * {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html {
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
}
ul li {
	list-style:none;
}
a {
	text-decoration:none;
	color:#108EE9;
	transition:color .3s ease;
}
html,body {
	font-family:"Roboto",sans-serif;
	font-size:14px;
	line-height:1.8;
	color:rgba(0,0,0,.65);
	background:#F7F7F7;
}
header {
	position:relative;
	height:50px;
	line-height:50px;
	color:#fff;
	background-color:#061024;
	padding:0 20px;
}
.container {
	width:100%;
	margin:0 auto;
	padding:30px;
}
.main_wrapper {
	background-color:#fff;
	position:relative;
	padding-top:45px;
	overflow:hidden;
}
.main_wrapper .sidebar {
	position:absolute;
	top:0;
	z-index:99;
	width:272px;
	border-right:1px solid #EEE;
	bottom:0;
}
.main_wrapper .sidebar .menu {
	padding:12px 0;
	overflow:auto;
}
.menu_item {
	padding-left:40px;
}
.menu_item h2 {
	font-weight:normal;
	color:rgba(0,0,0,.7);
	display:inline;
	font-size:16px;
}
.menu_item i.tri_icon {
	display:inline-block;
	position:relative;
	border:6px solid #ccc;
	border-color:transparent;
	border-left-color:#d8d8d8;
}
.menu_item {
	cursor:pointer;
}
.menu_item ul {
	display:none;
}
.menu_item ul li {
	padding-left:40px;
}
.menu_item ul li span {
	color:rgba(0,0,0,.65);
	cursor:pointer;
}
.menu_item ul l.........完整代码请登录后点击上方下载按钮下载查看