实现京东的无延迟的菜单的效果

最新推荐文章于 2020-11-01 00:56:03 发布

liying123466

最新推荐文章于 2020-11-01 00:56:03 发布

阅读量471

点赞数

分类专栏： js的学习

本文链接：https://blog.csdn.net/liying123466/article/details/79448957

版权

js的学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

自己做过很多的下拉菜单的效果，其中因为项目需要自己就去学了京东的无延迟菜单的制作。

下面请看其中的代码：

<!DOCTYPE html>
<html>
<head>
	<title>京东无延迟效果</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		.wrap{
			position: relative;
			width:200px;
			left:50px;
			top:50px; 
		}
		ul{
			padding: 15px 0;
			margin:0;
			list-style: none;;
			background: #6c6669;
			color:white;
			border-right-width: 0;

			}
	   li{
	   	  height: 30px;
	   	  line-height: 30px;
	   	  padding-left:12px;
	   	  cursor: pointer;
	   	  font-size: 14px;
	   	  position: relative;
	   }

	   li.active{
	   	 background: #999395;
	   }
	   li span:hover{
	   	   color:red;
	   }
	   .none{
	   	 display: none;
	   } 
	   #sub{
	   	 width:600px;
	   	 height:300px;
	   	 position: absolute;
	   	 border:1px solid #f7f7f7;
	   	 background: #f7f7f7;
	   	 box-shadow: 2px 0 5px  rgba(0,0,0,.3);
	   	 left:200px;
	   	 top:0;
	   	 box-sizing:border-box;
	   	 margin:0;
	   	 padding:10px;
	   }
	   .sub_content dl {
	   	  overflow: hidden;
	   }
	   .sub_content dt{
	   	 float:left;
	   	 width:70px;
	   	 font-weight: bold;
	   	 clear: left;
	   	 position: relative;
	   }
	   .sub_content dd{
	   	  float:left;
	   	  margin-left: 5px;
	   	  border-top:1px solid #eee;
	   	  margin-bottom:5px;
	   }
	   .sub_content dt i{
             width:4px;
             height:14px;
            /* 这里其中的9代表的font-size,14代表的是line-height，这里其中是简写*/
             font:400 9px/14px consolas;
             position: absolute;
             right:5px;
	   }
	</style>
	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
	<script type="text/javascript">
		$(document).ready(function(){
           var sub = $("#sub");
           var activeRow;
           var activeMenu;
           var timer;
           var mouseInSub=false;

           sub.on('mouseenter',function(e){
                mouseInSub=true;
           }).on('mouseleave',function(e){
           	  mouseInSub=false;
           });


           $("#test").on('mouseenter',function(e){
           	   sub.removeClass("none");
           })
            .on('mouseleave',function(e){
           	  sub.addClass("none");
           	  if(activeRow){
           	  	 activeRow.removeClass('active');
           	  	 activeRow=null;
           	  }
           	  if(activeMenu){
           	  	 activeMenu.removeClass('active');
           	  	 activeMenu=null;
           	  }
           })
            .on('mouseenter','li',function(e){
              if(!activeRow){
              	activeRow=$(e.target).addClass('active');
              	activeMenu = $("#"+activeRow.data('id'));
              	activeMenu.removeClass('none');
              	return;
              }

               //这里加入其中的一个去抖的概念
               if(timer){
               	 clearTimeout(timer);
               }
              timer = setTimeout(function(){
              	  if(mouseInSub){
              	  	 return;

              	  }
                  activeRow.removeClass('active');
	              activeMenu.addClass("none");

	              activeRow=$(e.target);
	              activeRow.addClass('active');
	              activeMenu = $("#"+activeRow.data('id'));
	              activeMenu.removeClass("none");
	              timer=null;
              },300);
           })  
		});
	</script>
</head>
<body>
<div class="wrap" id="test">
	 <ul >
	   	  <li data-id="a">
	   	  	 <span>1</span>
	   	  </li>
	   	  <li data-id="b">
	   	  	 <span>2</span>
	   	  </li>
	   	  <li data-id="c">
	   	  	<span>3</span>
	   	  </li>
	   	  <li data-id="d">
	   	  	<span>4</span>
	   	  </li>
   </ul>
   <div id="sub" class="none">
   	    <div id="a" class="sub_content none">
   	    	<dl>
   	    		<dt>1<i>></i></dt>
   	    		<dd>
   	    			one
   	    		</dd>
   	    	</dl>
   	    </div>
   	    <div id="b" class="sub_content none">
   	    	<dl>
   	    		<dt>2<i>></i></dt>
   	    		<dd>
   	    			one
   	    		</dd>
   	    	</dl>

   	    </div>
   	    <div id="c" class="sub_content none">
   	    	<dl>
   	    		<dt>3<i>></i></dt>
   	    		<dd>
   	    			one
   	    		</dd>
   	    	</dl>
   	    </div>
   	    <div id="d" class="sub_content none">
   	    	<dl>
   	    		<dt>4<i>></i></dt>
   	    		<dd>
   	    			one
   	    		</dd>
   	    	</dl>
   	    </div>
   </div>
</div>
</body>
</html>

如果你们仔细看其中的前端中的html的代码，你不难发现其中一级菜单中用的是data-id，在二级菜单里面用的是id,其中存在的对应关系相信你们也注意到了吧！正因为这个对应关系在其中我们才会用到jq里面的data("id")这个方法了，剩下的就是其中的对于其中的active和none类的添加和删除了从而改变其中样式。

你也可以看到其中的注释里面的东西，写到一个防抖的东西，这里就是用到了其中的定时器进行延迟来解决其中的防抖的。

liying123466

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现京东的无延迟的菜单的效果

自己做过很多的下拉菜单的效果，其中因为项目需要自己就去学了京东的无延迟菜单的制作。下面请看其中的代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;京东无延迟效果&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/cs
复制链接

扫一扫

专栏目录