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

代码语言:html

所属分类:菜单导航

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

代码标签: jquery 左侧 多级 折叠 菜单 点击 显示 相应 内容

下面为部分代码预览,完整代码请点击下载或在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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0