jquery下拉菜单效果学习
来源:互联网 发布:java中类中的static 编辑:程序博客网 时间:2024/05/17 22:58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /><title>jquery</title><style type="text/css">ul{float:left}li{list-style-type:none;}ul ul li{}</style><script src="jquery-1.4.3.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){ $("ul li").next("ul").hide(); $("ul li").mouseover(function() { $(this).next("ul").slideDown(); }); $("ul ul").mouseleave(function() { $(this).slideUp(); }); $('ul ul li').mouseover(function(){$(this).css('background-color','red');});$('ul ul li').mouseout(function(){$(this).css('background-color','white');});})</script></head><body> <ul > <li>one</li> <ul > <li>1</li> <li>2</li> <li>3</li> </ul> </ul> <ul > <li>two</li> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </ul> <ul > <li>three</li> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </ul></body></html>
上面是一个下拉菜单效果的源码,效果图如下:
提出如下问题:
1.为什么要用$(document).ready()事件?
--不用不行,呵呵。
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
2.$("ul ul").mouseleave()改成mouseout为啥不行?
--
大家知道事件的冒泡特性,在上面的BUG中也正是因为这个冒泡特性,对于mouseover事件来说 ,当鼠标从其他元素 移动到 child节点时发生,但此事件会冒泡 所以会导致 parent 也出发mouseover。如果我们对 parent注册了 mouseover监听,从 parent移动到child 同样出发parent的mouseover 有时候我们不希望这样的事情发生。
对于 mouseover 和mouseenter 两个事件 最大的区别就是 mouseenter 是 不冒泡的事件,这时候 如果注册的监听 是mouseenter的话 无论鼠标从任何元素 移动到child时 只有child元素 发生mouseenter事件 而其祖宗节点 都不会因为冒泡 而触发此事件。
3.你能让1、2、3与one对齐吗?
改成如下排列,以li为单位
<ul> <li><a href="#">AAAAA</a> <ul ><li><a href="#">11</a></li><li><a href="#">22</a></li><li><a href="#">33</a></li><li><a href="#">44</a></li></ul> </li>
</ul>
下面是相对强大点的实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script src="js/jquery-1.5.1.min.js"></script><script type="text/javascript">$(function(){ $('.meun').hover(function(){ $(this).find('ul').stop(true,true).slideDown(); },function(){$(this).find('ul').stop(true,true).slideUp('fast'); })}) </script><style>*{margin:0;padding:0;}a{text-decoration:none;color:#333;font-size:14px;}ul{list-style:none;}.nav{display:inline-block;margin:20px;height:30px;line-height:30px;background:#eee;}.meun {float:left;position:relative;}.meun a{display:inline-block;padding:0 10px;}.meun a:hover{background:#333;}.meun a:hover{color:#fff;}.meun ul{display:none;position:absolute;left:0;top:30px;width:100px;background:#eee;border:1px solid #d3d3d3}.meun ul a{display:block;}</style></head><body><div class="nav"> <ul> <li class="meun in1"><a href="#">AAAAA</a> <ul id="sub_01" class="sub" ><li><a href="#">11</a></li><li><a href="#">22</a></li><li><a href="#">33</a></li><li><a href="#">44</a></li></ul> </li><li class="meun in2"><a href="#">BBBBB</a><ul id="sub_01" class="sub" ><li><a href="#">11</a></li><li><a href="#">22</a></li><li><a href="#">33</a></li><li><a href="#">44</a></li></ul></li><li class="meun in1"><a href="#">CCCCC</a> <ul id="sub_01" class="sub" ><li><a href="#">11</a></li><li><a href="#">22</a></li><li><a href="#">33</a></li><li><a href="#">44</a></li></ul> </li> </ul> </div> </body></html>
我觉得这个可移植性很好,比较清晰。。。。
- jquery下拉菜单效果学习
- JQuery网页下拉菜单效果
- Jquery 下拉菜单动画效果
- 【js与jquery】导航下拉菜单效果
- jquery实现二级菜单下拉效果
- jquery实现二级导航下拉菜单效果
- 学习JQUERY,写的简单下拉菜单!
- jquery实现可以左右选择的下拉菜单效果
- JQuery实现类似QQ下拉菜单式的效果
- jQuery slideToggle轻松实现效果不错的垂直下拉菜单
- jQuery实现类似QQ下拉菜单式的效果
- jQuery实现两个下拉菜单的选项互相移动效果
- jQuery slideToggle轻松实现效果不错的垂直下拉菜单
- jQuery中筛选中next下拉菜单效果
- 利用jquery高仿select下拉菜单效果
- css+jquery鼠标滑过,显示下拉菜单效果
- 下拉菜单效果
- jquery仿京东导航,仿淘宝商城左侧分类导航菜单,jquery实现下拉菜单效果
- JAVA多线程同步(转载)
- 全球电信设备巨头全面陷入危机,只有3家盈利
- OSGI HelloWorld
- 假期实训总结-赵鹏
- CX51 用户手册----LARGE伪指令
- jquery下拉菜单效果学习
- KMP
- 现在比较流行的一种新的清除浮动的方法
- 关于电感和磁珠
- SOJ 2325:Word Transformation _floyd
- Linux:-bash: ***: command not found,系统很多命令都用不了,均提示没有此命令
- 联想杨元庆自掏近两千万奖员工,联想PC年内或超惠普成全球第一
- 模板特化(专门化)
- Chapter 16 Templates and Generic Programming