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 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"&.........完整代码请登录后点击上方下载按钮下载查看