Home > Article > Web Front-end > Example sharing jquery to achieve multi-level menu effect

Example sharing jquery to achieve multi-level menu effect

小云云Original: 2017-12-31 16:04:382368browse

This article mainly introduces the multi-level menu effect based on jquery in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

<!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>

Related recommendations:

Java example code for building a tree menu (including multi-level menu)

Sample code sharing of how to implement multi-level menu effects in JavaScript

Multi-level menu operation (function implementation)

The above is the detailed content of Example sharing jquery to achieve multi-level menu effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery implementation of keyboard enter search functionNext article：Detailed explanation of jQuery implementation of keyboard enter search function

See more

Example sharing jquery to achieve multi-level menu effect

Related articles