基于jQuery實(shí)現(xiàn)左側(cè)菜單欄可折疊功能
更新時間：2016年12月27日 15:00:37 作者：xw1985520
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)左側(cè)菜單欄可折疊功能，介紹菜單折疊過程中三種變換形式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天給大家介紹一下左側(cè)菜單欄可折疊功能，在后臺管理中左側(cè)菜單折疊功能是特別常見的一個功能，基本不管是什么類型的管理后臺都會涉及到這個功能的實(shí)現(xiàn)。
今天給大家介紹的是二級可折疊菜單的功能，相對一級的菜單折疊功能就顯得稍微比較復(fù)雜一點(diǎn)了，我這里將給大家介紹菜單折疊過程中三種變換形式。
第一種變換形式是：不管點(diǎn)擊哪一級菜單都可以打開或者關(guān)閉本級菜單，但是不會影響其他級別的菜單：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery點(diǎn)擊展開收縮樹形菜單</title>
<style type="text/css">
*{margin: 0;padding: 0}
body{font-size: 12px;font-family: "宋體","微軟雅黑";}
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;color: #fff;}
.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
}
.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;}
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.inactive').click(function(){
if($(this).siblings('ul').css('display')=='none'){
$(this).addClass('inactives');
$(this).siblings('ul').slideDown(100).children('li');
}else{
$(this).removeClass('inactives');
$(this).siblings('ul').slideUp(100);
}
})
});
</script>
</head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#">中國美協(xié)章程</a></li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li><a href="#" class="inactive">組織機(jī)構(gòu)</a>
<ul style="display: none">
<li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>
<ul>
<li><a href="#">辦公室</a></li>
<li><a href="#">人事處</a></li>
<li><a href="#">組聯(lián)部</a></li>
<li><a href="#">外聯(lián)部</a></li>
<li><a href="#">研究部</a></li>
<li><a href="#">維權(quán)辦</a></li>
</ul>
</li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li class="last"><a href="#">《美術(shù)》雜志社</a></li>
</ul>
</li>
<li><a href="#" class="inactive">組織機(jī)構(gòu)</a>
<ul style="display: none">
<li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>
<ul>
<li><a href="#">辦公室</a></li>
<li><a href="#">人事處</a></li>
<li><a href="#">組聯(lián)部</a></li>
<li><a href="#">外聯(lián)部</a></li>
<li><a href="#">研究部</a></li>
<li><a href="#">維權(quán)辦</a></li>
</ul>
</li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li class="last"><a href="#">《美術(shù)》雜志社</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
運(yùn)行截圖為：
第二種變換形式是：一級菜單會互相影響，也就是一級菜單同時只能打開一個，其他都得處于關(guān)閉狀態(tài)。但是二級菜單下的開閉不會受到影響，也就是二級菜單本來是什么狀態(tài)，點(diǎn)擊任意一級菜單之后還是相應(yīng)的狀態(tài)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery點(diǎn)擊展開收縮樹形菜單</title>
<style type="text/css">
*{margin: 0;padding: 0}
body{font-size: 12px;font-family: "宋體","微軟雅黑";}
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;color: #fff;}
.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
}
.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;}
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.inactive').click(function(){
var className=$(this).parents('li').parents().attr('class');
if($(this).siblings('ul').css('display')=='none'){
if(className=="yiji"){
$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
$(this).parents('li').siblings('li').children('ul').slideUp(100);
}
$(this).addClass('inactives');
$(this).siblings('ul').slideDown(100).children('li');
}else {
$(this).removeClass('inactives');
$(this).siblings('ul').slideUp(100);
}
})
});
</script>
</head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#">中國美協(xié)章程</a></li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li><a href="#" class="inactive">組織機(jī)構(gòu)</a>
<ul style="display: none">
<li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>
<ul>
<li><a href="#">辦公室</a></li>
<li><a href="#">人事處</a></li>
<li><a href="#">組聯(lián)部</a></li>
<li><a href="#">外聯(lián)部</a></li>
<li><a href="#">研究部</a></li>
<li><a href="#">維權(quán)辦</a></li>
</ul>
</li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li class="last"><a href="#">《美術(shù)》雜志社</a></li>
</ul>
</li>
<li><a href="#" class="inactive">組織機(jī)構(gòu)</a>
<ul style="display: none">
<li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>
<ul>
<li><a href="#">辦公室</a></li>
<li><a href="#">人事處</a></li>
<li><a href="#">組聯(lián)部</a></li>
<li><a href="#">外聯(lián)部</a></li>
<li><a href="#">研究部</a></li>
<li><a href="#">維權(quán)辦</a></li>
</ul>
</li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li class="last"><a href="#">《美術(shù)》雜志社</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
第三種變換形式是：一級菜單會互相影響，也就是一級菜單同時只能打開一個，其他都得處于關(guān)閉狀態(tài)。而且二級菜單也會受到影響，也就是當(dāng)點(diǎn)擊一級菜單的時候，所有的二級菜單都會處于關(guān)閉的狀態(tài)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery點(diǎn)擊展開收縮樹形菜單</title>
<style type="text/css">
*{margin: 0;padding: 0}
body{font-size: 12px;font-family: "宋體","微軟雅黑";}
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;color: #fff;}
.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
}
.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;}
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.inactive').click(function(){
var className=$(this).parents('li').parents().attr('class');
if($(this).siblings('ul').css('display')=='none'){
if(className=="yiji"){
$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
$(this).parents('li').siblings('li').children('ul').slideUp(100);
$(this).parents('li').children('ul').children('li').children('ul').parent('li').children('a').removeClass('inactives');
$(this).parents('li').children('ul').children('li').children('ul').slideUp(100);
}
$(this).addClass('inactives');
$(this).siblings('ul').slideDown(100);
}else{
$(this).removeClass('inactives');
$(this).siblings('ul').slideUp(100);
}
})
});
</script>
</head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#">中國美協(xié)章程</a></li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li><a href="#" class="inactive">組織機(jī)構(gòu)</a>
<ul style="display: none">
<li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>
<ul>
<li><a href="#">辦公室</a></li>
<li><a href="#">人事處</a></li>
<li><a href="#">組聯(lián)部</a></li>
<li><a href="#">外聯(lián)部</a></li>
<li><a href="#">研究部</a></li>
<li><a href="#">維權(quán)辦</a></li>
</ul>
</li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li class="last"><a href="#">《美術(shù)》雜志社</a></li>
</ul>
</li>
<li><a href="#" class="inactive">組織機(jī)構(gòu)</a>
<ul style="display: none">
<li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>
<ul>
<li><a href="#">辦公室</a></li>
<li><a href="#">人事處</a></li>
<li><a href="#">組聯(lián)部</a></li>
<li><a href="#">外聯(lián)部</a></li>
<li><a href="#">研究部</a></li>
<li><a href="#">維權(quán)辦</a></li>
</ul>
</li>
<li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
<ul>
<li><a href="#">綜合部</a></li>
<li><a href="#">大型活動部</a></li>
<li><a href="#">展覽部</a></li>
<li><a href="#">藝委會工作部</a></li>
<li><a href="#">信息資源部</a></li>
<li><a href="#">雙年展辦公室</a></li>
</ul>
</li>
<li class="last"><a href="#">《美術(shù)》雜志社</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
這樣左側(cè)折疊菜單的三種狀態(tài)就都已經(jīng)實(shí)現(xiàn)了，是不是特別簡單呀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)菜單欄導(dǎo)航效果
- 最常見的左側(cè)分類菜單欄jQuery實(shí)現(xiàn)代碼
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
- jQuery 實(shí)現(xiàn)側(cè)邊浮動導(dǎo)航菜單效果
- jquery實(shí)現(xiàn)點(diǎn)擊向下展開菜單項(xiàng)(伸縮導(dǎo)航)效果
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
- JQuery 寫的個性導(dǎo)航菜單
- jQuery仿京東商城樓梯式導(dǎo)航定位菜單
- jquery實(shí)現(xiàn)網(wǎng)頁左側(cè)導(dǎo)航菜單欄
相關(guān)文章
本文主要介紹了jQuery制作圖片旋轉(zhuǎn)效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊功能
這篇文章主要介紹了Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊功能,需要的朋友可以參考下2017-06-06
Dom是Document Object Model的縮寫，意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關(guān)的接口，使用該接口可以輕松訪問頁面中所有的標(biāo)準(zhǔn)組件，本文給大家介紹jQuery隨手筆記之常用的jQuery操作DOM事件，需要的朋友參考下2015-11-11
jquery模擬picker實(shí)現(xiàn)滑動選擇效果
這篇文章主要為大家詳細(xì)介紹了jquery模擬picker實(shí)現(xiàn)滑動選擇效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)遍歷單選框的方法,涉及jQuery針對頁面表單元素的遍歷及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
之前本人的工作和學(xué)習(xí)多以原生js 為主，對jQuery 一直都不是很了解，但jQuery 作為當(dāng)今最優(yōu)秀的js 類庫之一，必須是要花時間好好學(xué)習(xí)下的，今天正好蛋疼，讀了里面一些代碼2011-04-04
本文主要實(shí)例淺析jQuery操作select控件取值和設(shè)值。有需要的朋友可以看下，希望會對大家有所幫助2016-12-12
jQuery動畫效果-fadeIn fadeOut淡入淺出示例代碼
jQuery動畫效果淡入淺出想必大家都有見到過吧，其實(shí)很很簡單，通過fadeIn fadeOut方法便可輕松實(shí)現(xiàn)，具體如下，喜歡的朋友可以參考下，希望對大家有所幫助2013-08-08
前面兩篇已經(jīng)道明了jQuery的核心框架。弄清楚了jQuery對象的組成，以及如何用extend方法來擴(kuò)展庫。鏈?zhǔn)讲僮?也僅僅是方法體內(nèi)返回this。2011-06-06
Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動實(shí)現(xiàn)代碼
Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-11-11