并列元素模拟父子元素二级菜单

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

父级分类

  • 子分类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()
	}
});

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

时间: 2024-10-11 21:31:26

并列元素模拟父子元素二级菜单的相关文章

一个二级菜单引发的血案

近期发现自己css不是很好,于是又看了一遍<css权威指南>.总感觉自己抓不到重点.弃疗中...于是看看其他书.然后学妹跟我说她的二级菜单写得很乱.当时我心里就在想二级菜单,有何难?自认为10分钟能搞定.跟她要效果图并很自大的说了句“等会儿,我写个简单的”.于是血案由此引发... 二级菜单要实现的原效果图是: (如发现雷同,不是巧合,是我从别的网页上截屏下来的 ~_~).既然说了简单,肯定效果没这么精美.但是至少基本效果和原理要实现. 10分钟过去了....15分钟过去了....这个“等会儿”

第十五篇 JS 移入移出事件 模拟一个二级菜单

JS 移入移出事件 模拟一个二级菜单 老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,onmouseout是移出事件.当然还有其他的事件效果,这里就先不说明了. 先直接上一段代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

[CSS]解决父子元素margin-top重叠问题

问题代码: <div id="father" style="background:#eee;"> <div id="son" style="margin-top:50px;">son</div> </div> 方法一: 父元素设置overflow:hidden <div id="father" style="background:#eee;ov

父元素onmouseover触发事件在父子元素间移动不停触发的问题

今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center} .container{height: 347px

兼容性—IE6下浮动元素和定位元素并列,定位元素消失

浮动元素和定位元素同级,定位元素消失,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 400px; height: 400px; position: relative; border:1px solid b

CSS中模拟父元素选择器

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{

javascript模拟select下拉菜单

javascript模拟select下拉菜单: 由于自带的select下拉菜单确实是不够美观,并且美化的潜力也不够大,所以对外观要求比较高的网站,基本都要使用自定义的select下拉菜单,下面就提供了一个简单的例子供大家参考,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="

html和css实现一级菜单和二级菜单学习笔记

实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta ht

二级菜单联动(自定义框架)

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 7 <script> 8 //自定义框架 9 (function(){ 10 //命名空间的定义 11 if(!window['cwy']){ 12 window['cwy']={}; 13 } 14 function $(id){