Heim > Artikel > Web-Frontend > Beispiel für die gemeinsame Nutzung von JQuery, um einen mehrstufigen Menüeffekt zu erzielen

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

小云云Original: 2017-12-31 16:04:382341Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der jQuery-Implementierung der Suchfunktion mit TastatureingabeNächster Artikel：Detaillierte Erläuterung der jQuery-Implementierung der Suchfunktion mit Tastatureingabe

In Verbindung stehende Artikel

Mehr sehen