简单易懂的jQuery导航(三级菜单)源码

 我来答

3个回答

#热议# 为什么有人显老，有人显年轻？

百度网友25e328c51f
推荐于2017-06-27 · 超过51用户采纳过TA的回答

知道小有建树答主

回答量：112

采纳率：92%

帮助的人：66.1万

我也去答题访问个人页

关注

展开全部

<!-- 三级操蛋导航 -->
<div class="nav_left">
	<div class="nav_leftlist">
		<h2><b></b>用户系统</h2>
		<dl>
			<dt><b></b>用户管理</dt>
			<dd>
				<a class="cur" href="">商户信息<b></b></a>
				<a href="">用户信息<b></b></a>
			</dd>
		</dl>
	</div>
	<div class="nav_leftlist">
		<h2><b></b>财务系统</h2>
		<dl>
			<dt><b></b>系统账务</dt>
			<dd>
				<a href="">平台账单<b></b></a>
				<a href="">账单明细<b></b></a>
			</dd>
		</dl>
		<dl>
			<dt><b></b>商户账务</dt>
			<dd>
				<a href="">商户账单<b></b></a>
				<a href="">提现管理<b></b></a>
			</dd>
		</dl>
		<dl>
			<dt><b></b>用户账务</dt>
			<dd>
				<a href="">用户账单<b></b></a>
				<a href="">提现管理<b></b></a>
			</dd>
		</dl>
	</div>
</div>
<style>
.nav_left{background: #232b35;height: 100%;width: 220px;min-height: 600px;position: fixed;top: 100px;left: 0;}
.nav_leftlist{}
.nav_leftlist h2{height: 50px;line-height: 50px;padding-left: 40px;font-size: 16px;background: #3b444f;color: #999999;position: relative;cursor: pointer;}
.nav_leftlist h2 b{position: absolute;top: 20px;left: 13px;width: 16px;height: 9px;background: url(../images/icon04.png) no-repeat;background-position: 0 0;cursor: pointer;}
.nav_leftlist h2 b.cur{background-position: -16px 0;}
.nav_leftlist dl{}
.nav_leftlist dl dt{height: 50px;line-height: 50px;background: #2c3643;font-size: 16px;color: #ffffff;padding-left: 60px;position: relative;cursor: pointer;}
.nav_leftlist dl dt b{position: absolute;top: 20px;left: 34px;width: 16px;height: 9px;background: url(../images/icon04.png) no-repeat;background-position: 0 -10px;}
.nav_leftlist dl dt b.cur{background-position: -16px -10px;}
.nav_leftlist dl dd{}
.nav_leftlist dl dd a{display: block;height: 50px;line-height: 50px;color: #fff;padding-left: 80px;font-size: 16px;position: relative;}
.nav_leftlist dl dd a.cur{color: #ee581c;}
.nav_leftlist dl dd a.cur b{display: block;position: absolute;top: 16px;right: -1px;width: 11px;height: 18px;background: url(../images/icon04.png) no-repeat;background-position: 0 -20px;}
</style>

</body>

<script type="text/javascript" src="../js/jquery.js" ></script>
<script type="text/javascript" >
	$(function(){
		$('.nav_leftlist').on('click', 'h2', function(event) {
			$(this).siblings('dl').toggle();
			if($(this).siblings('dl').css('display')=='none'){
				$(this).find('b').addClass('cur');
			}else{
				$(this).find('b').removeClass('cur');
			}
		});
		$('.nav_leftlist').on('click', 'dl dt', function(event) {
			$(this).siblings('dd').toggle();
			if($(this).siblings('dd').css('display')=='none'){
				$(this).find('b').addClass('cur');
			}else{
				$(this).find('b').removeClass('cur');
			}
		});
	})
</script>

效果图：

已赞过 已踩过<

评论收起

AiPPT
2024-09-19 广告

随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图... 点击进入详情页

本回答由AiPPT提供

yugi111
2015-10-14 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CSS+JavaScript三级折叠菜单</title>
    <style>
        * {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font: 12px "宋体";
    padding-top: 20px;
}

#menu {
    width: 200px;
    margin: auto;
}

#menu h1 {
    cursor: pointer;
    color: #FFF;
    font-size: 12px;
    padding: 5px 0 3px 10px;
    border: #C60 1px solid;
    margin-top: 1px;
    background-color: #F93;
}

#menu h2 {
    cursor: pointer;
    color: #777;
    font-size: 12px;
    padding: 5px 0 3px 10px;
    border: #E7E7E7 1px solid;
    border-top-color: #FFF;
    background-color: #F4F4F4;
}

#menu ul {
    padding-left: 15px;
    height: 100px;
    border: #E7E7E7 1px solid;
    border-top: none;
    overflow: auto;
}

#menu ul li {
    padding: 5px 0 3px 10px;
}

.no {
    display: none;
}
    </style>
    <script>
        function ShowMenu(obj, noid) {
            var block = document.getElementById(noid);
            var n = noid.substr(noid.length - 1);
            if (noid.length == 4) {
                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
                for (var i = 0; i < h2.length; i++) {
                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
                    h2[i].style.color = "";
                }
                obj.style.color = "#FF0000";
                for (var i = 0; i < ul.length; i++) {
                    if (i != n) {
                        ul[i].className = "no";
                    }
                }
            } else {
                var span = document.getElementById("menu").getElementsByTagName("span");
                var h1 = document.getElementById("menu").getElementsByTagName("h1");
                for (var i = 0; i < h1.length; i++) {
                    h1[i].innerHTML = h1[i].innerHTML.replace("+", "-");
                    h1[i].style.color = "";
                }
                obj.style.color = "#0000FF";
                for (var i = 0; i < span.length; i++) {
                    if (i != n) {
                        span[i].className = "no";
                    }
                }
            }
            if (block.className == "no") {
                block.className = "";
                obj.innerHTML = obj.innerHTML.replace("-", "+");
            } else {
                block.className = "no";
                obj.style.color = "";
            }
        }
    </script>
</head>

<body>
    <div id="menu">
        <h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>
        <span id="NO0" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>
   <ul id="NO00" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>
   <ul id="NO01" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>
   <ul id="NO02" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>
   <ul id="NO03" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
    <li>一级菜单A_7</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>
        <span id="NO1" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>
   <ul id="NO10" class="no">
    <li>二级菜单B_0</li>
    <li>二级菜单B_1</li>
    <li>二级菜单B_2</li>
    <li>二级菜单B_3</li>
    <li>二级菜单B_4</li>
    <li>二级菜单B_5</li>
    <li>二级菜单B_6</li>
    <li>二级菜单B_7</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>
   <ul id="NO11" class="no">
    <li>二级菜单B_0</li>
    <li>二级菜单B_1</li>
    <li>二级菜单B_2</li>
    <li>二级菜单B_3</li>
    <li>二级菜单B_4</li>
    <li>二级菜单B_5</li>
    <li>二级菜单B_6</li>
    <li>二级菜单B_7</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>
        <span id="NO2" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>
   <ul id="NO20" class="no">
    <li>三级菜单C_0</li>
    <li>三级菜单C_1</li>
    <li>三级菜单C_2</li>
    <li>三级菜单C_3</li>
    <li>三级菜单C_4</li>
    <li>三级菜单C_5</li>
    <li>三级菜单C_6</li>
    <li>三级菜单C_7</li>
    <li>三级菜单C_8</li>
    <li>三级菜单C_9</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>
   <ul id="NO21" class="no">
    <li>三级菜单C_0</li>
    <li>三级菜单C_1</li>
    <li>三级菜单C_2</li>
    <li>三级菜单C_3</li>
    <li>三级菜单C_4</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>
        <span id="NO3" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>
   <ul id="NO30" class="no">
    <li>四级菜单D_0</li>
    <li>四级菜单D_1</li>
    <li>四级菜单D_2</li>
    <li>四级菜单D_3</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>
   <ul id="NO31" class="no">
    <li>四级菜单D_0</li>
    <li>四级菜单D_1</li>
    <li>四级菜单D_2</li>
    <li>四级菜单D_3</li>
    <li>四级菜单D_4</li>
    <li>四级菜单D_5</li>
   </ul>
</span>
    </div>
</body>

</html>

本回答被网友采纳

已赞过 已踩过<

评论收起

朝花夕实
2017-06-22 · TA获得超过387个赞

知道小有建树答主

回答量：266

采纳率：100%

帮助的人：102万

我也去答题访问个人页

关注

展开全部

http://sc.chinaz.com/tag_jiaoben/jquery.html

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

简单易懂的jQuery导航(三级菜单)源码

其他类似问题

为你推荐：