基于jquery實現(xiàn)多級菜單效果

更新時間：2017年07月25日 14:15:32 作者：diasa

這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)多級菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)多級菜單效果展示的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  *{
   margin:0;
   padding:0;
   font-size:14px;
  }
  ul,li{
   list-style:none;
  }
  .box{
   margin:10px;
   padding:10px;
   width:300px;
   border:1px dashed #008000;
   /*漸進增強:首先設置一個純色的背景，對于不兼容css3的瀏覽器來說會使用純色，對于兼容的瀏覽器，我們在下面在額外的增加一些漸變色，這樣會覆蓋掉上面*/
   background:#ffe470;
   background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
   background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
   background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
   background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
  }
  .box li{
   position:relative;
   line-height:30px;
  }
  .box em{
   position:absolute;
   top:7px;
   left:0;
   width:16px;
   height:16px;
   background:url("img/icon.png") no-repeat -59px -28px;
   cursor:pointer;

  }
  .box span{
   display:block;
   padding-left:20px;
  }
  .box em.open{
   background-position:-42px -28px;
  }
  .box .two{
   margin-left:20px;
  }
  .box .three{
   margin-left:40px;
  }
  .box .four{
   margin-left:60px;
  }
  .box .two,.box .three,.box .four{
   display:none;
  }
 </style>
</head>
<body>
 <div class='box' id='box'>
  <ul>
   <li>
    <em></em>
    <span>第一級第一個</span>
    <ul class='two'>
     <li><span>第二級第一個</span></li>
     <li>
      <em></em><span>第二級第二個</span>
      <ul class='three'>
       <li><span>第三極第一個</span></li>
       <li><span>第三極第二個</span></li>
       <li>
        <em></em><span>第三極第三個</span>
        <ul class='four'>
         <li><span>第四級第一個</span></li>
         <li><span>第四級第二個</span></li>
         <li><span>第四級第三個</span></li>
        </ul>
       </li>
      </ul>
     </li>
     <li>
      <em></em><span>第二級第三個</span>
      <ul class='three'>
       <li><span>第三級第一個</span></li>
       <li><span>第三級第二個</span></li>
       <li><span>第三級第三個</span></li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
  <ul>
   <li>
    <em></em>
    <span>第一級第一個</span>
    <ul class='two'>
     <li><span>第二級第一個</span></li>
     <li>
      <em></em><span>第二級第二個</span>
      <ul class='three'>
       <li><span>第三極第一個</span></li>
       <li><span>第三極第二個</span></li>
       <li>
        <em></em><span>第三極第三個</span>
        <ul class='four'>
         <li><span>第四級第一個</span></li>
         <li><span>第四級第二個</span></li>
         <li><span>第四級第三個</span></li>
        </ul>
       </li>
      </ul>
     </li>
     <li>
      <em></em><span>第二級第三個</span>
      <ul class='three'>
       <li><span>第三級第一個</span></li>
       <li><span>第三級第二個</span></li>
       <li><span>第三級第三個</span></li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
 </div>

 <script>
  var $box = $('#box');
  $box.find("span").each(function(index,item){
   var $pre = $(this).prev();
   if($pre[0] && $pre[0].tagName.toLowerCase()==="em"){
    $(this).css("cursor","pointer");
   }
  })
  //jQuery里面除了bind、unbind、on、off、click這些綁定事件的方式外，還提供了一種delegate(1.7版本以前用的是live)

  function fn(){
   var $par = $(this).parent();
   var $ul = $($par.children('ul')[0]);
   var $em = $($par.children('em')[0]);
   if($ul.length>0){
    
    $ul.toggle();
    $em.toggleClass("open");
    var isBlock = $ul.css('display')==="block"?true:false;
    //如果當前的是收縮的話，我們需要把子子孫孫中所有的ul/em都隱藏和移除open樣式
    if(isBlock){
     $par.find('ul').css("display","none");
     $par.find("em").removeClass("open");
    }
   }
  }

  $box.delegate('em',"click",fn)//給$box綁定點擊事件，如果當前的事件源是em的話，我們執(zhí)行fn
  $box.delegate('span',"click",fn)//給$box綁定點擊事件，如果當前的事件源是em的話，我們執(zhí)行fn
 </script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: