Beispiel für die gemeinsame Nutzung von JQuery, um einen mehrstufigen Menüeffekt zu erzielen-js-Tutorial-php.cn

Beispiel für die gemeinsame Nutzung von JQuery, um einen mehrstufigen Menüeffekt zu erzielen

小云云

Freigeben： 2017-12-31 16:04:38

Original

2392 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den auf JQuery basierenden mehrstufigen Menüeffekt vor. Ich hoffe, er kann jedem helfen.

<!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>
 <p class=&#39;box&#39; id=&#39;box&#39;>
  <ul>
   <li>
    <em></em>
    <span>第一级第一个</span>
    <ul class=&#39;two&#39;>
     <li><span>第二级第一个</span></li>
     <li>
      <em></em><span>第二级第二个</span>
      <ul class=&#39;three&#39;>
       <li><span>第三极第一个</span></li>
       <li><span>第三极第二个</span></li>
       <li>
        <em></em><span>第三极第三个</span>
        <ul class=&#39;four&#39;>
         <li><span>第四级第一个</span></li>
         <li><span>第四级第二个</span></li>
         <li><span>第四级第三个</span></li>
        </ul>
       </li>
      </ul>
     </li>
     <li>
      <em></em><span>第二级第三个</span>
      <ul class=&#39;three&#39;>
       <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=&#39;two&#39;>
     <li><span>第二级第一个</span></li>
     <li>
      <em></em><span>第二级第二个</span>
      <ul class=&#39;three&#39;>
       <li><span>第三极第一个</span></li>
       <li><span>第三极第二个</span></li>
       <li>
        <em></em><span>第三极第三个</span>
        <ul class=&#39;four&#39;>
         <li><span>第四级第一个</span></li>
         <li><span>第四级第二个</span></li>
         <li><span>第四级第三个</span></li>
        </ul>
       </li>
      </ul>
     </li>
     <li>
      <em></em><span>第二级第三个</span>
      <ul class=&#39;three&#39;>
       <li><span>第三级第一个</span></li>
       <li><span>第三级第二个</span></li>
       <li><span>第三级第三个</span></li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
 </p>

 <script>
  var $box = $(&#39;#box&#39;);
  $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(&#39;ul&#39;)[0]);
   var $em = $($par.children(&#39;em&#39;)[0]);
   if($ul.length>0){
    
    $ul.toggle();
    $em.toggleClass("open");
    var isBlock = $ul.css(&#39;display&#39;)==="block"?true:false;
    //如果当前的是收缩的话，我们需要把子子孙孙中所有的ul/em都隐藏和移除open样式
    if(isBlock){
     $par.find(&#39;ul&#39;).css("display","none");
     $par.find("em").removeClass("open");
    }
   }
  }

  $box.delegate(&#39;em&#39;,"click",fn)//给$box绑定点击事件，如果当前的事件源是em的话，我们执行fn
  $box.delegate(&#39;span&#39;,"click",fn)//给$box绑定点击事件，如果当前的事件源是em的话，我们执行fn
 </script>
</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Java-Beispielcode zum Erstellen eines Baummenüs (einschließlich Menü mit mehreren Ebenen)

Beispielcode-Sharing, wie JavaScript mehrstufige Menüeffekte implementiert

Mehrstufige Menübedienung (Funktionsimplementierung)

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung von JQuery, um einen mehrstufigen Menüeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!