<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=“keywords” content=“”>
<meta name=“description” content=“”>
<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">
<link rel="stylesheet" href="CSS/shouye.css">
<title></title>
</head>
<body>
<!--导航栏部分-->
<p class="nav">
<p class="box">
<a href="#" class="a1"></a>
<a href="#" class="a2"></a>
<a href="#" class="a3"></a>
<a href="#" class="a4"></a>
<a href="#" class="a5"></a>
<a href="#" class="a6"></a>
</p>
</p>
<!--左收放侧边栏(三级)-->
<p class="leftNav">
<!--一级-->
<ul class="ulBox1">
<li class="xitong">
<a href="#">系统管理</a>
<!--二级-->
<ul class="ulBox2">
<!--第一项,用户-->
<li class="yonghu2"><i class="yonghu1-1"></i><a href="#">用户管理</a></li>
<!--第二项,基础-->
<li class="jichu2"><i class="jichu2-1"></i><a href="#">基础资料</a>
<!--三级-->
<ul class="jichu2-2">
<li class="kehu3"><i class="kehu3-1"></i><a href="#">客户</a></li>
<li class="gongying3"><i class="gongying3-1"></i><a href="#">供应商</a></li>
<li class="chanping3"><i class="chanping3-1"></i><a href="#">产品</a></li>
</ul>
</li>
<!--第三项,销售-->
<li class="xiaoshou2"><i class="xiaoshou2-1"></i><a href="#">销售订单</a>
<!--三级-->
<ul class="xiaoshou2-2">
<li class="dingdan3"><i class="dingdan3-1"></i><a href="#">订单</a></li>
<li class="baobiao3"><i class="baobiao3-1"></i><a href="#">报表</a></li>
</ul>
</li>
<!--第四项,采购-->
<li class="caigou2"><i class="caigou2-1"></i><a href="#">采购</a>
<!--三级-->
<ul class="caigou2-2">
<li class="jihua3"><i class="jihua3-1"></i><a href="#">计划</a></li>
<li class="baobiao3-2"><i class="baobiao3-2-1"></i><a href="#">报表</a></li>
</ul>
</li>
<!--第五项,生产-->
<li class="shengchan2"><i class="shengchan2-1"></i><a href="#">生产</a>
<!--三级-->
<ul class="shengchan2-2">
<li class="shengcan3"><i class="shengchan3-1"></i><a href="#">生产</a></li>
<li class="baobiao3-3"><i class="baobiao3-3-1"></i><a href="#">报表</a></li>
</ul>
</li>
<!--第六项,库存-->
<li class="kucun2"><i class="kucun2-1"></i><a href="#">库存</a>
<!--三级-->
<ul class="kucun2-2">
<li class="cangku3"><i class="cangku3-1"></i><a href="#">仓库</a></li>
<li class="ruku3"><i class="ruku3-1"></i><a href="#">入库</a></li>
<li class="chuku3"><i class="chuku3-1"></i><a href="#">出库</a></li>
<li class="baobiao3-4"><i class="baobiao3-4-1"></i><a href="#">报表</a></li>
</ul>
</li>
<!--第七项,财务-->
<li class="caiwu2"><i class="caiwu2-1"></i><a href="#">财务</a>
<!--三级-->
<ul class="caiwu2-2">
<li class="caiwu3"><i class="caiwu3-1"></i><a href="#">财务管理</a></li>
<li class="yingshou3"><i class="yingshou3-1"></i><a href="#">应收</a></li>
<li class="yingfu3"><i class="yingfu3-1"></i><a href="#">应付</a></li>
<li class="tongji3"><i class="tongji3-1"></i><a href="#">统计</a>
<!--四级-->
<span class="one"></span>
<ul class="caiwu2-3">
<li class="baobiao4"><a href="#">报表</a></li>
<li class="liebiao4"><a href="#">列表</a></li>
<li class="xinzeng4"><a href="#">新增</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
</body>
<!--<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>-->
<script src="JS/jquery-3.2.1.min.js"></script>
<script src="JS/shouye.js"></script></html>
CSS: **
*{
margin: 0;
padding: 0;}
Körper{
overflow-x: hidden;}
/Hintergrund der Navigationsleiste/
.nav{
width: 1427px;
height: 80px;
background: url("../images/nav/zhuye.png") no-repeat #204094;
position: relative;}
/Navigationsleistenschaltfläche/
.box{
width: 690px;
height: 37px;
position: absolute;
top: 25px;
left: 299px;
/*border: 1px solid red;*/}
.Box a {
width: 41px;
height: 36px;
float: left;
display: block;
margin-left: 25px;
/*border: 1px solid red;*/}
/Handling IE, A-Link-Doted-Frame-kompatibel/
a:focus{outline:none;}
.a1{
background: url("../images/nav/ziliao.png") no-repeat;}
.a2{
background: url("../images/nav/dingdan.png") no-repeat;}
.a3{
background: url("../images/nav/caigou.png") no-repeat;}
.a4{
background: url("../images/nav/shengchan.png") no-repeat;}
.a5{
background: url("../images/nav/kucun.png") no-repeat;}
.a6{
background: url("../images/nav/caiwu.png") no-repeat;}
/Linke versenkbare Seitenleiste, drei Ebenen/
/Große Hintergrundbox/
.leftNav{
width: 180px;
height: 846px;
background-color: #B3E0F8;
color: #0C318F;
font: 700 14px '微软雅黑';
/*border: 1px solid black;*/}
/Der äußerste große UL, die Gesamtposition der ersten Schicht/
.ulBox1 {
margin-left: 15px;
padding-top: 25px;
cursor: pointer;}
.ulBox1 li {
list-style: none;}
.ulBox1 a {
text-decoration: none;
color: #0C318F;}
/Öffentliche Klasse der zweiten Ebene.Arrow/
.ulBox2 .yonghu2,.jichu2,.xiaoshou2,.caigou2,.shengchan2,.kucun2,.caiwu2 {
background: url("../images/qietu/leftnave/two/right2icon.png") no-repeat 0px 11px;
padding-left: 20px;
margin-left: -15px;}
/Öffentliche Klasse der dritten Ebene.Arrow/
.ulBox2 .kehu3,.gongying3,.chanping3,.dingdan3,.baobiao3,.jihua3,.baobiao3-2,.shengcan3,.baobiao3-3,.cangku3 ,.ruku3,.chuku3,.baobiao3-4,
.caiwu3,.yingshou3,.yingfu3,.tongji3{
background: url("../images/qietu/leftnave/three/right3icon.png") no-repeat 0px 12px;
padding-left: 20px;
margin-left: -15px;}
/Öffentliche Klasse im Berichtsstil/
.ulBox2 .baobiao3-1,.baobiao3-2-1,.baobiao3-3-1,.baobiao3-4-1 {
background: url("../images/qietu/leftnave/three/baobiao3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Icon-Einstellungssystem der ersten Ebene/
.ulBox1 .xitong{
background: url("../images/qietu/leftnave/one/xiyongicon.png") no-repeat 0px 2px ;
padding-left: 20px;}
/Die oberen und unteren Abstände aller Optionen auf der zweiten Ebene, alle Optionen/
.ulBox2 li{
padding-top: 10px;}
/Die zweite Ebene, der erste Einstellungssymbolbenutzer /
.ulBox2 .yonghu1-1 {
background: url("../images/qietu/leftnave/two/yonghu2icon.png") no-repeat;
padding-left: 20px;}
/Zweite Ebene, zweites Elementeinstellungssymbol E-Mail/
.ulBox2 .jichu2-1 {
background: url("../images/qietu/leftnave/two/youjian2icon.png") no-repeat 0px 1.5px;
padding-left: 20px;}
/Die zweite Ebene, die zweite Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .jichu2 ul{
margin-left: 12px;}
/Zweite Ebene, zweite Option, Verzeichnissymboleinstellung der dritten Ebene/
/Erstes Element/
.jichu2-2 .kehu3-1{
background: url("../images/qietu/leftnave/three/kehu3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Zweites Element/
.jichu2-2 .gongying3-1 {
background: url("../images/qietu/leftnave/three/gongying3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Der dritte Punkt/
.jichu2-2 .chanping3-1 {
background: url("../images/qietu/leftnave/three/chanping3icon.png") no-repeat 0px 3px;
padding-left: 20px;}
/Die zweite Ebene, die dritte Option, das Verzeichnis der dritten Ebene wird nach links verschoben/
.ulBox2 .xiaoshou2 ul{
margin-left: 12px;}
/Die zweite Ebene, das zweite Einstellungssymbol email/
.ulBox2 .xiaoshou2-1 {
background: url("../images/qietu/leftnave/two/xiaoshou2icon.png") no-repeat 0px 1.5px;
padding-left: 20px;}
/Zweite Ebene, dritte Option, Verzeichnissymboleinstellung der dritten Ebene/
/Erstes Element/
.xiaoshou2-2 .dingdan3-1 {
background: url("../images/qietu/leftnave/three/dingdan3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Die zweite Ebene, die vierte Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .caigou2 ul {
margin-left: 12px;}
/Zweite Ebene, viertes Einkaufssymbol für Artikeleinstellungen/
.ulBox2 .caigou2-1 {
background: url("../images/qietu/leftnave/two/caigou2icon.png") no-repeat 0px 1.5px;
padding-left: 20px;}
/Zweite Ebene, vierte Option, Verzeichniseinstellungssymbol der dritten Ebene/
/Erstes Element/
.caigou2-2 .jihua3-1 {
background: url("../images/qietu/leftnave/three/jihua3(caigou)icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Die zweite Ebene, die fünfte Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .shengchan2 ul {
margin-left: 12px;}
/Zweite Ebene, Produktionssymbol für fünfte Elementeinstellung/
.ulBox2 .shengchan2-1 {
background: url("../images/qietu/leftnave/two/shengchan2icon.png") no-repeat;
padding-left: 20px;}
/Zweite Ebene, fünfte Option, Verzeichniseinstellungssymbol der dritten Ebene/
/Erstes Element/
.shengchan2-2 .shengchan3-1 {
background: url("../images/qietu/leftnave/three/shengchan3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Die zweite Ebene, die sechste Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .kucun2 ul {
margin-left: 12px;}
/Zweite Ebene, Inventarsymbol für sechste Artikeleinstellung/
.ulBox2 .kucun2-1 {
background: url("../images/qietu/leftnave/two/kucun2icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Zweite Ebene, sechste Option, Verzeichniseinstellungssymbol der dritten Ebene/
/Erstes Element/
.kucun2-2 .cangku3-1 {
background: url("../images/qietu/leftnave/three/cangku3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Zweites Element/
.kucun2-2 .ruku3-1 {
background: url("../images/qietu/leftnave/three/ruku3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Das dritte Element/
.kucun2-2 .chuku3-1 {
background: url("../images/qietu/leftnave/three/chuku3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Die zweite Ebene, die siebte Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .caiwu2 ul {
margin-left: 12px;}
/Zweite Ebene, siebtes Elementeinstellungs-Inventarsymbol/
.ulBox2 .caiwu2-1 {
background: url("../images/qietu/leftnave/two/caiwu2icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Zweite Ebene, siebte Option, Verzeichniseinstellungssymbol der dritten Ebene/
/Erstes Element/
.caiwu2-2 .caiwu3-1 {
background: url("../images/qietu/leftnave/three/caiwuguanli3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Zweiter Artikel/
.caiwu2-2 .yingshou3-1 {
background: url("../images/qietu/leftnave/three/yingshou3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Das dritte Element/
.caiwu2-2 .yingfu3-1 {
background: url("../images/qietu/leftnave/three/yingfu3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Das vierte Element/
.caiwu2-2 .tongji3-1 {
background: url("../images/qietu/leftnave/three/tongji3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Zweite Ebene, siebte Option, Verzeichniseinstellungssymbol der vierten Ebene/
.caiwu2-3{
margin-left: -15px;}
/Der erste Artikel/
.caiwu2-3 .baobiao4 {
background: url("../images/qietu/leftnave/four/baobiao4icon.png") no-repeat 0px 11px;
padding-left: 20px;}
/Zweiter Artikel/
.caiwu2-3 .liebiao4 {
background: url("../images/qietu/leftnave/four/liebiao4icon.png") no-repeat 0px 12px;
padding-left: 20px;}
/Das dritte Element/
.caiwu2-3 .xinzeng4 {
background: url("../images/qietu/leftnave/four/xinzeng4icon.png") no-repeat 0px 12px;
padding-left: 20px;}
/Die zweite Ebene, die zweite Ebene ul ulBox2, 7 Li-Optionen .jichu2/.xiaoshou2/.caigou2/.shengchan2/.kucun2/.caiwu2 Die dritte Ebene entspricht der zweiten Ebene 6 Falten /
/ .jichu2-2 .xiaoshou2-2 .caigou2-2 .shengchan2-2 .kucun2-2 .caiwu2-2/
.ulBox2 .jichu2-2,.xiaoshou2-2,.caigou2-2,.shengchan2-2,. kucun2-2,.caiwu2-2 {
display: none;}
/Die dritte Schicht .tongji3 eine Falte, .caiwu2-3/
.ulBox2 .caiwu2-3 {
display: none;}
.hideen {
display: block;}
/!!Show !!/
.show {
display: block;
}
//CSSS-Code:
*{
margin: 0;
padding: 0;}
Körper{
overflow-x: hidden;}
/Hintergrund der Navigationsleiste/
.nav{
width: 1427px;
height: 80px;
background: url("../images/nav/zhuye.png") no-repeat #204094;
position: relative;}
/Navigationsleistenschaltfläche/
.box{
width: 690px;
height: 37px;
position: absolute;
top: 25px;
left: 299px;
/*border: 1px solid red;*/}
.Box a {
width: 41px;
height: 36px;
float: left;
display: block;
margin-left: 25px;
/*border: 1px solid red;*/}
/Handling IE, A-Link-Doted-Frame-kompatibel/
a:focus{outline:none;}
.a1{
background: url("../images/nav/ziliao.png") no-repeat;}
.a2{
background: url("../images/nav/dingdan.png") no-repeat;}
.a3{
background: url("../images/nav/caigou.png") no-repeat;}
.a4{
background: url("../images/nav/shengchan.png") no-repeat;}
.a5{
background: url("../images/nav/kucun.png") no-repeat;}
.a6{
background: url("../images/nav/caiwu.png") no-repeat;}
/Linke versenkbare Seitenleiste, drei Ebenen/
/Große Hintergrundbox/
.leftNav{
width: 180px;
height: 846px;
background-color: #B3E0F8;
color: #0C318F;
font: 700 14px '微软雅黑';
/*border: 1px solid black;*/}
/Der äußerste große UL, die Gesamtposition der ersten Schicht/
.ulBox1 {
margin-left: 15px;
padding-top: 25px;
cursor: pointer;}
.ulBox1 li {
list-style: none;}
.ulBox1 a {
text-decoration: none;
color: #0C318F;}
/Öffentliche Klasse der zweiten Ebene.Arrow/
.ulBox2 .yonghu2,.jichu2,.xiaoshou2,.caigou2,.shengchan2,.kucun2,.caiwu2 {
background: url("../images/qietu/leftnave/two/right2icon.png") no-repeat 0px 11px;
padding-left: 20px;
margin-left: -15px;}
/Öffentliche Klasse der dritten Ebene.Arrow/
.ulBox2 .kehu3,.gongying3,.chanping3,.dingdan3,.baobiao3,.jihua3,.baobiao3-2,.shengcan3,.baobiao3-3,.cangku3 ,.ruku3,.chuku3,.baobiao3-4,
.caiwu3,.yingshou3,.yingfu3,.tongji3{
background: url("../images/qietu/leftnave/three/right3icon.png") no-repeat 0px 12px;
padding-left: 20px;
margin-left: -15px;}
/Öffentliche Klasse im Berichtsstil/
.ulBox2 .baobiao3-1,.baobiao3-2-1,.baobiao3-3-1,.baobiao3-4-1 {
background: url("../images/qietu/leftnave/three/baobiao3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Icon-Einstellungssystem der ersten Ebene/
.ulBox1 .xitong{
background: url("../images/qietu/leftnave/one/xiyongicon.png") no-repeat 0px 2px ;
padding-left: 20px;}
/Die oberen und unteren Abstände aller Optionen auf der zweiten Ebene, alle Optionen/
.ulBox2 li{
padding-top: 10px;}
/Die zweite Ebene, der erste Einstellungssymbolbenutzer /
.ulBox2 .yonghu1-1 {
background: url("../images/qietu/leftnave/two/yonghu2icon.png") no-repeat;
padding-left: 20px;}
/Zweite Ebene, zweites Elementeinstellungssymbol E-Mail/
.ulBox2 .jichu2-1 {
background: url("../images/qietu/leftnave/two/youjian2icon.png") no-repeat 0px 1.5px;
padding-left: 20px;}
/Die zweite Ebene, die zweite Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .jichu2 ul{
margin-left: 12px;}
/Zweite Ebene, zweite Option, Verzeichnissymboleinstellung der dritten Ebene/
/Erstes Element/
.jichu2-2 .kehu3-1{
background: url("../images/qietu/leftnave/three/kehu3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Zweites Element/
.jichu2-2 .gongying3-1 {
background: url("../images/qietu/leftnave/three/gongying3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Der dritte Punkt/
.jichu2-2 .chanping3-1 {
background: url("../images/qietu/leftnave/three/chanping3icon.png") no-repeat 0px 3px;
padding-left: 20px;}
/Die zweite Ebene, die dritte Option, das Verzeichnis der dritten Ebene wird nach links verschoben/
.ulBox2 .xiaoshou2 ul{
margin-left: 12px;}
/Die zweite Ebene, das zweite Einstellungssymbol email/
.ulBox2 .xiaoshou2-1 {
background: url("../images/qietu/leftnave/two/xiaoshou2icon.png") no-repeat 0px 1.5px;
padding-left: 20px;}
/Zweite Ebene, dritte Option, Verzeichnissymboleinstellung der dritten Ebene/
/Erstes Element/
.xiaoshou2-2 .dingdan3-1 {
background: url("../images/qietu/leftnave/three/dingdan3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Die zweite Ebene, die vierte Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .caigou2 ul {
margin-left: 12px;}
/Zweite Ebene, viertes Einkaufssymbol für Artikeleinstellungen/
.ulBox2 .caigou2-1 {
background: url("../images/qietu/leftnave/two/caigou2icon.png") no-repeat 0px 1.5px;
padding-left: 20px;}
/Zweite Ebene, vierte Option, Verzeichniseinstellungssymbol der dritten Ebene/
/Erstes Element/
.caigou2-2 .jihua3-1 {
background: url("../images/qietu/leftnave/three/jihua3(caigou)icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Die zweite Ebene, die fünfte Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .shengchan2 ul {
margin-left: 12px;}
/Zweite Ebene, Produktionssymbol für fünfte Elementeinstellung/
.ulBox2 .shengchan2-1 {
background: url("../images/qietu/leftnave/two/shengchan2icon.png") no-repeat;
padding-left: 20px;}
/Zweite Ebene, fünfte Option, Verzeichniseinstellungssymbol der dritten Ebene/
/Erstes Element/
.shengchan2-2 .shengchan3-1 {
background: url("../images/qietu/leftnave/three/shengchan3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Die zweite Ebene, die sechste Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .kucun2 ul {
margin-left: 12px;}
/Zweite Ebene, Inventarsymbol für sechste Artikeleinstellung/
.ulBox2 .kucun2-1 {
background: url("../images/qietu/leftnave/two/kucun2icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Zweite Ebene, sechste Option, Verzeichniseinstellungssymbol der dritten Ebene/
/Erstes Element/
.kucun2-2 .cangku3-1 {
background: url("../images/qietu/leftnave/three/cangku3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Zweites Element/
.kucun2-2 .ruku3-1 {
background: url("../images/qietu/leftnave/three/ruku3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Das dritte Element/
.kucun2-2 .chuku3-1 {
background: url("../images/qietu/leftnave/three/chuku3icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Die zweite Ebene, die siebte Option, das Verzeichnis der dritten Ebene nach links verschieben/
.ulBox2 .caiwu2 ul {
margin-left: 12px;}
/Zweite Ebene, siebtes Elementeinstellungs-Inventarsymbol/
.ulBox2 .caiwu2-1 {
background: url("../images/qietu/leftnave/two/caiwu2icon.png") no-repeat 0px 1px;
padding-left: 20px;}
/Zweite Ebene, siebte Option, Verzeichniseinstellungssymbol der dritten Ebene/
/Erstes Element/
.caiwu2-2 .caiwu3-1 {
background: url("../images/qietu/leftnave/three/caiwuguanli3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Zweiter Artikel/
.caiwu2-2 .yingshou3-1 {
background: url("../images/qietu/leftnave/three/yingshou3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Das dritte Element/
.caiwu2-2 .yingfu3-1 {
background: url("../images/qietu/leftnave/three/yingfu3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Das vierte Element/
.caiwu2-2 .tongji3-1 {
background: url("../images/qietu/leftnave/three/tongji3icon.png") no-repeat 0px 2px;
padding-left: 20px;}
/Zweite Ebene, siebte Option, Verzeichniseinstellungssymbol der vierten Ebene/
.caiwu2-3{
margin-left: -15px;}
/Der erste Artikel/
.caiwu2-3 .baobiao4 {
background: url("../images/qietu/leftnave/four/baobiao4icon.png") no-repeat 0px 11px;
padding-left: 20px;}
/Zweiter Artikel/
.caiwu2-3 .liebiao4 {
background: url("../images/qietu/leftnave/four/liebiao4icon.png") no-repeat 0px 12px;
padding-left: 20px;}
/Das dritte Element/
.caiwu2-3 .xinzeng4 {
background: url("../images/qietu/leftnave/four/xinzeng4icon.png") no-repeat 0px 12px;
padding-left: 20px;}
/Die zweite Ebene, die zweite Ebene ul ulBox2, 7 Li-Optionen .jichu2/.xiaoshou2/.caigou2/.shengchan2/.kucun2/.caiwu2 Die dritte Ebene entspricht der zweiten Ebene 6 Falten /
/ .jichu2-2 .xiaoshou2-2 .caigou2-2 .shengchan2-2 .kucun2-2 .caiwu2-2/
.ulBox2 .jichu2-2,.xiaoshou2-2,.caigou2-2,.shengchan2-2,. kucun2-2,.caiwu2-2 {
display: none;}
/Die dritte Schicht .tongji3 eine Falte, .caiwu2-3/
.ulBox2 .caiwu2-3 {
display: none;}
.hideen {
display: block;}
/!!Show !!/
.show {
display: block;
}
// JS-Code mit JQ*
/**
Erstellt von zhengyongchun am 18.04.2017.
*/
//Kopfnavigationsleistenteil:
$(function () {
$(".a1").mousedown(function () {
$(".a1").css({'background': 'url(images/nav/ziliaonex.png) no-repeat'});
})
$(".a1").mouseup(function () {
$(".a1").css({'background': 'url(images/nav/ziliao.png) no-repeat'});
})
$(".a2").mousedown(function () {
$(".a2").css({'background': 'url(images/nav/dingdannex.png) no-repeat'});
})
$(".a2").mouseup(function () {
$(".a2").css({'background': 'url(images/nav/dingdan.png) no-repeat'});
})
$(".a3").mousedown(function () {
$(".a3").css({'background': 'url(images/nav/caigounex.png) no-repeat'});
})
$(".a3").mouseup(function () {
$(".a3").css({'background': 'url(images/nav/caigou.png) no-repeat'});
})
$(".a4").mousedown(function () {
$(".a4").css({'background': 'url(images/nav/shengchannex.png) no-repeat'});
})
$(".a4").mouseup(function () {
$(".a4").css({'background': 'url(images/nav/shengchan.png) no-repeat'});
})
$(".a5").mousedown(function () {
$(".a5").css({'background': 'url(images/nav/kucunnex.png) no-repeat'});
})
$(".a5").mouseup(function () {
$(".a5").css({'background': 'url(images/nav/kucun.png) no-repeat'});
})
$(".a6").mousedown(function () {
$(".a6").css({'background': 'url(images/nav/caiwunex.png) no-repeat'});
})
$(".a6").mouseup(function () {
$(".a6").css({'background': 'url(images/nav/caiwu.png) no-repeat'});
})
// 左三级侧边栏
// 二级所有点击li选项集合
// console.log($(".ulBox2>li:not(.yonghu2)"));
// 二级li选项中的所有收放UL集合
// console.log($(".ulBox2>li:not(.yonghu2)>ul"));
// 三级 .tongji3
var count=0;
$(".ulBox2>li:not(.yonghu2,caiwu2)").click(function () {
if(count==0){
$(this).children("ul").css('display','block');
count=1;
}else if(count==1){
$(this).children("ul").css('display','none');
count=0;
}
})
var count1=0;
$(".caiwu2-2>.tongji3").click(function (e) {
e.stopPropagation();
if(count1==0){
$(this).children("ul").css('display','block');
count1=1;
}else if(count1==1){
$(this).children("ul").css('display','none');
count1=0;
}
})
// var count=0;
// $(".ulBox2>li:not(.yonghu2,caiwu2)").click(function () {
// if (count==0){
// $(this).children("ul").css('display','block');
// count=1;
// }else if(count==1){
// $(this).children("ul").css('display','none');
// count=0;
// }
// }
})
友情帮顶。。。
给你提个建议：
1、问题标题中不要有错别字，语句要通顺，发之前自己审查一下
2、示例代码不要太长，三四百行的代码这里没时间看
把关键代码贴出来不是更好吗？