jQuery 淡入淡出、展开收缩菜单实现代码

更新时间：2009年12月19日 01:57:41 作者：

jQuery淡入淡出、展开收缩菜单

效果图:

运行以后，刷新下即可。

<!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=gb2312" /> <title>jQuery淡入淡出、展开收缩菜单</title> <style type="text/css"> ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style> <script language="javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $(".menu").hover( function(){ //$(".content").fadeIn(800); // 淡入 $(".content").slideDown(800); // 展开 },function(){ //$(".content").fadeOut(1000) // 淡出 $(".content").slideUp(1000)　　　 // 收缩 }); }) </script> </head> <body> <ul> <li class="menu"> <a>弹出菜单</a> <ul class="content"> <li><a href="#">菜单内容1</a></li> <li><a href="#">菜单内容2</a></li> <li><a href="#">菜单内容3</a></li> <li><a href="#">菜单内容4</a></li> <li><a href="#">菜单内容5</a></li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

用JQuery 判断某个属性是否存在hasAttr的解决方法
本篇文章介绍了，用JQuery 判断某个属性是否存在hasAttr的解决方法。需要的朋友参考下
2013-04-04
jQuery基础知识点总结(必看)
下面小编就为大家带来一篇jQuery基础知识点总结(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jquery中关于bind()方法的使用技巧分享
这篇文章主要给大家分享了jquery中关于bind()方法的使用技巧，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03
jquery dialog键盘事件代码
jquery dialog键盘事件代码，检测回车等事件的触发问题。
2010-08-08
JQuery的自定义事件代码,触发,绑定简单实例
下面的代码是所有它自己的自定义事件触发。你可以绑定到这个自定义事件，并提高它时，你要执行的代码里面绑定。
2013-08-08
jquery实现奇偶行赋值不同css值
通常为了让页面呈现的更为美观，我们喜欢在奇偶行加上不同的颜色
2012-02-02
基于jquery用于查询操作的实现代码
通过javascript得到用户操作改变url参数从而实现某些功能，如查询(具体的查询由服务器端代码得到url中的参数组成查询语句实现)。
2010-05-05
jQuery接受后台传递的List的实例详解
这篇文章主要介绍了jQuery接受后台传递的List的实例详解的相关资料,这里提供了前台代码和后台代码的实现，需要的朋友可以参考下
2017-08-08
JQuery WEUI Select 组件增加搜索栏示例demo
这篇文章主要介绍了JQuery WEUI Select 组件增加搜索栏示例demo,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
jQuery 选择器项目实例分析及实现代码
首先废话一句，jQuery选择器真心很强大！接下来详细介绍jQuery 选择器项目实例实现方式
2012-12-12

jQuery 淡入淡出、展开收缩菜单实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具