jQuery如何實現(xiàn)文檔樹效果

這篇文章給大家分享的是有關(guān)jQuery如何實現(xiàn)文檔樹效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司是少有的網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、營銷型企業(yè)網(wǎng)站、小程序制作、手機APP,開發(fā)、制作、設(shè)計、買友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,自2013年創(chuàng)立以來,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

效果如下：

圖（1）點擊前

jQuery如何實現(xiàn)文檔樹效果

圖（2）點擊后

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin:0;
   padding:0;
   list-style: none;
  }
  .box{
   width: 250px;
   height: auto;
   padding: 20px;
   background: lightgrey;
   margin:0 auto;
  }
  .box li{
   line-height: 30px;
   /*注意：height沒有被設(shè)置，可以根據(jù)實際需要自動調(diào)整*/
   position: relative;
  }
  .box li em{
   position: absolute;
   left:0;
   top:7px;
   width: 16px;
   height: 16px;
   background-image: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=123b5048273b92eb544ad6eb0ed57c44");
   background-size:100%;
   cursor: pointer;
  }
  .box li em.open{
   background-image: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8f89447399822b0294ae590ccc641bf5");
   background-size:100%;
  }
  .box li span{
   padding-left: 20px;
   /*因為span前面的em已經(jīng)絕對定位，脫離文檔流了，所以span的左邊界直達(dá) li*/
  }
  .box ul{
   display: none;
  }
  .two{
    margin-left: 20px;
  }
  .three{
   margin-left: 40px;
  }
  .four{
   margin-left: 40px;
  }
  /*ul.box下的li顯示，其中有折疊的li加em；
   ul.box下的ul隱藏，其內(nèi)部的li是沒法顯示的*/
 </style>
</head>
<body>
<ul class="box">
 <li><em></em><span>第一級第一個</span>
  <ul class="two">
   <li><span>第二級第一個</span></li>
   <li><em></em><span>第二級第二個</span>
    <ul class="three">
     <li><em></em><span>第三級第一個</span>
      <ul class="four">
       <li><span>第四級第一個</span></li>
       <li><span>第四級第二個</span></li>
      </ul>
     </li>
     <li><span>第三級第二個</span></li>
    </ul>
   </li>
   <li><em></em><span>第二級第三個</span>
    <ul class="three">
     <li><span>第三級第一個</span></li>
     <li><span>第三級第二個</span></li>
    </ul>
   </li>
  </ul>
 </li>
 <li><em></em><span>第一級第一個</span>
  <ul class="two">
   <li><span>第二級第一個</span></li>
   <li><em></em><span>第二級第二個</span>
    <ul class="three">
     <li><em></em><span>第三級第一個</span>
      <ul class="four">
       <li><span>第四級第一個</span></li>
       <li><span>第四級第二個</span></li>
      </ul>
     </li>
     <li><span>第三級第二個</span></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
 /*思路：
 * 1.讓前面有em的span加上小手效果；
 * 2.點擊span or em的時候，看他父容器下是否有ul,如果有，讓其顯示，否則，隱藏
 * */
 var $box=$('.box');
 var $aSpan=$box.find('span');
 //1.讓前面有em的span加上小手效果；
 $aSpan.each(function(index,item){
  //if($(item).prev().length){ $(item).css('cursor','pointer');};思路1:
  $(item).prev('em').next('span').css('cursor','pointer'); //思路2:
 });
 //2.點擊span or em的時候，看他父容器下是否有ul,如果有，讓其顯示，否則，隱藏
 $box.click(function(e){
  //當(dāng)點擊的事件源是em or span的時候，我們看其父級下是否有ul
  // 如果有：展開讓其閉合，閉合就讓其展開；
  if(e.target.tagName.toLowerCase()=='em' || e.target.tagName.toLowerCase()=='span'){
   var $parent=$(e.target).parent();
   var $ul=$parent.children('ul');
   if($ul){
    if($ul.css('display')=='block'){//展開，讓其閉合
     //當(dāng)閉合的時候，讓當(dāng)前容器下，所有的em都移除open,所有的ul都隱藏；
     $parent.find('ul').hide();
     $parent.find('em').removeClass('open');
    }else{ //閉合讓其展開
     $ul.show();
     $parent.children('em').addClass('open');
    }
   }
  }
 })
</script>
</body>
</html>

感謝各位的閱讀！關(guān)于“jQuery如何實現(xiàn)文檔樹效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當(dāng)前標(biāo)題：jQuery如何實現(xiàn)文檔樹效果
標(biāo)題網(wǎng)址：http://bm7419.com/article28/igogcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)站設(shè)計、手機網(wǎng)站建設(shè)、軟件開發(fā)、搜索引擎優(yōu)化、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容