jQuery多級樹形選單詳解

admin發表於2017-10-23
jQuery

樹形選單在網站中有大量的應用，因為它的獨特優點：

（1）.可以有效的組織資料，使分類更為清晰明瞭。

（2）.樹形選單是可以摺疊的，以更小的空間容納更多的資料。

下面就詳細介紹一個使用jquery實現的樹形選單。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
h1, h2, h3, h4, h5, p, dl, dt, dd, ul, ol, li, input, img, body, button, form, table{
  margin:0;
  padding:0;
  border:0;
  list-style:none;
  font-size:12px;
  font-weight:normal
}
a{text-decoration:none}
a:link, a:visited{color:#333}
a:hover{background:#FC9}
.aside{
  width:163px;
  padding-left:10px
}
.aside h2{
  font-size:16px;
  padding-left:15px
}
.all{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 6px;}
.all1{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 -41px}
.box{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 10px;}
.box1{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 -37px}
.aside ul{margin-left:15px}
.aside li{
  display:none;
  height:24px;
  line-height:24px;
  margin-left:26px
}
.aside .bold{
  display:block;
  font-size:14px;
  height:30px;
  line-height:30px;
  padding-left:15px
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.all1').toggle(function(){
    $(this).removeClass('all1').addClass('all').siblings('.myUl').slideUp();
  },function(){
    $(this).removeClass('all').addClass('all1').siblings('.myUl').slideDown();
  });
  $('.box').toggle(function(){
    $(this).removeClass('box').addClass('box1');
  },function(){
    $(this).removeClass('box1').addClass('box');
  });
  $('.bold').toggle(function(){
    $(this).siblings().slideDown(); 
  },function(){
    $(this).siblings().slideUp(); 
  })  
})
</script>
</head>
<body>
<div class="aside">
  <h2 class="all1">KPI考核指標</h2>
  <ul class="myUl">
    <span class="bold box">當月考核結果</span>
    <li><a href="" title="" alt="">日考核結果跟蹤</a></li>
    <li><a href="" title="" alt="">日考核扣分分析</a></li>
    <li><a href="" title="" alt="">日扣分佔比分析</a></li>
    <li><a href="" title="" alt="">月扣分佔比分析</a></li>
    <li><a href="" title="" alt="">考核異常跟蹤</a></li>
  </ul>
  <ul class="myUl">
    <span class="bold box">年累計考核結果</span>
    <li><a href="" title="" alt="">月考核結果跟蹤</a></li>
    <li><a href="" title="" alt="">年累計扣分分析</a></li>
    <li><a href="" title="" alt="">扣分佔比分析</a></li>
  </ul>
  <ul class="myUl">
    <span class="bold box">資料統計</span>
    <li><a href="" title="" alt="">考核指標環比分析</a></li>
    <li><a href="" title="" alt="">考核指標扣分佔比分析</a></li>
    <li><a href="" title="" alt="">考核指標趨勢分析</a></li>
    <li><a href="" title="" alt="">考核指標排名分析</a></li>
    <li><a href="" title="" alt="">考核指標同比分析</a></li>
  </ul>
</div>
</body>
</html>

可以實現屬性選單的摺疊和展開效果，下面介紹一下它的實現過程。

一.實現原理:

（1）.摺疊和展開圖示的切換:

摺疊和展開圖示在一張背景圖上，當點選的時候，通過控制背景圖片位置實現切換效果，具體可以參閱CSS background-position一章節。

（2）.選單的摺疊和隱藏:

選單的摺疊和隱藏主要是控制標題元素的兄弟元素的隱藏和顯示實現的，參閱相關閱讀。

二.程式碼註釋:

（1）.$(document).ready(function(){}),文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$('.all1').toggle(function(){},function(){})，點選元素切換函式的執行。

（3）.$(this).removeClass('all1').addClass('all').siblings('.myUl').slideUp()，這是一個鏈式呼叫，首先會移出當前點選元素上的樣式class屬性all1，然後為再為其新增樣式class屬性all，然後將它的同輩元素中class屬性值為myUl的元素收縮隱藏，一句話，這段程式碼實現了點選一級樹，實現二級數樹隱藏效果。

（4）.$(this).removeClass('all').addClass('all1').siblings('.myUl').slideDown()，此程式碼和上面的作用相反，點選一級樹，實現二級數的顯示效果。後面程式碼功能都是類似的，不多介紹。

三.相關閱讀:

（1）.toggle()參閱jQuery toggle()一章節。 

（2）.removeClass()參閱jQuery removeClass()一章節。 

（3）.addClass()參閱jQuery addClass()一章節。 

（4）.siblings()參閱jQuery siblings()一章節。 

（5）.slideUp()參閱jQuery slideUp()一章節。 

（6）.slideDown()參閱jQuery slideDown()一章節。 

相關文章