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

代码语言：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 li.check span {
	color:#37f;
}
.menu_item.menu_show ul {
	display:block;
}
.menu_item.menu_show i.tri_icon {
	transform:rotate(90deg);
}
.main_con {
	position:relative;
	margin-left:271px;
	padding:12px 40px;
	background:#fff;
	border-left:1px solid #EEE;
}
.main_con .main_con_item {
	display:none;
}
.main_con .main_con_item:nth-child(1) {
	display:block;
}
.main_con .main_con_item .title {
	margin-bottom:16px;
	font-size:16px;
	line-height:24px;
}
.main_con_item .con p {
	margin:0 0 8px;
}
.breadcrumb {
	position:absolute;
	top:0;
	z-index:9;
	width:1240px;
	padding:10px 40px 10px 312px;
	background-color:rgba(255,255,255,.95);
	line-height:40px;
	color:rgba(0,0,0,.45);
}
.breadcrumb a {
	display:inline-block;
	vertical-align:top;
	max-width:200px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.breadcrumb .split {
	display:inline-block;
	vertical-align:middle;
	padding:0 3px;
}

</style>
</head>

<body>
    <div id="main_demo">
        <div class="container">
            <div class="main_wrapper">
                <div class="sidebar">
                    <ul class="menu">
                        <li class="menu_item menu_show"><a><i class="tri_icon"></i><h2>HTML</h2></a>
                            <ul class="menu_item_child">
                                <li><a title="HTML5"><span>HTML5</span></a></li>
                            </ul>
                        </li>
                        <li class="menu_item"><a><i class="tri_icon"></i><h2>JavaScript</h2></a>
                            <ul class="menu_item_child">
                                <li><a><span>AngularJS</span></a></li>
                                <li><a><span>jQuery</span></a></li>
                                <li><a><span>ReactJS</span></a></li>
                                <li><a><span>VueJS</span></a></li>
                            </ul>
                        </li>
                        <li class="menu_item"><a><i class="tri_icon"></i><h2>CSS</h2></a>
                            <ul class="menu_item_child">
                                <li><a><span>CSS3</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="breadcrumb"><a>jQueryScript.Net</a><span class="split">/</span><a>HTML</a><span class="split last">/</span><a>HTML5</a></div>
                <div class="main_con">
                    <ul class="main_con_ul">
                        <li class="main_con_item">
                            <ul>
                                <li class="check">
                                    <h2 class="title">HTML.........完整代码请登录后点击上方下载按钮下载查看