zoukankan      html  css  js  c++  java
  • 并列元素模拟父子元素二级菜单

    通常二级菜单是使用父子元素

    父级分类
    • 子分类1
    • 子分类2
    • 子分类3

    首先子分类是隐藏的,当鼠标滑倒父级分类上时出现子分类,而当鼠标滑倒子分类上时,子分类不会消失,因为子分类是在父级分类的元素里面的

    那么,如果父级分类和子分类是并列元素,该怎样做到从父级分类滑到子分类上子分类不消失呢?
    这就需要使用定时器了!

     
    $(function(){
    	var fa= $('fa');
    	var ch= $('ch');
    	var timer = null;
    	
    	fa.onmouseover = show;
    	fa.onmouseout = hide;
    	
    	ch.onmouseover = show;
    	ch.onmouseout = hide;
    	
    	function show(){
    		clearInterval( timer );  //当显示的时候先清除隐藏的定时器。作用就是移动到二级分类的时候,清除父级分类移开的隐藏二级分类的定时器。通常情况下,开一个定时器之前都要先清除这个定时器,防止多次点击生成多个定时器的BUG
    		ch.style.display = 'block';
    	}
    	function hide(){
    		timer = setTimeout(function(){
    			ch.style.display = 'none';
    		}, 200);  //间隔一段时间才消失,让鼠标有时间移到子元素上,触发show()
    	}
    });
    

    好处就是父级和子级分离,某些子级内容很多的地方,能增强结构便于维护

  • 相关阅读:
    es6 语法 (数值扩展)
    手机日期插件 (转加上自己喜欢的)
    仿微信抢红包(js 转)
    默认时间为今天
    es6 语法 (解构赋值)
    es6 语法 (let 和const)
    es6环境搭建
    express 安装和运行
    git 常用操作,下拉,提交,更新,还原
    排序。
  • 原文地址:https://www.cnblogs.com/3body/p/5416945.html
Copyright © 2011-2022 走看看