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

ttx9n · 发表于 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" 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需刷新才能执行]

.l4 · 发表于 2022-8-27 23:07:41

管灌灌灌灌灌灌灌灌灌灌

sykzus · 发表于 2022-10-16 21:28:35

554411515451555

xf9hlg1 · 发表于 2022-11-28 05:20:04

非常vbcbvcvbvcb

123456 · 发表于 2022-12-12 00:39:02

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

uj9lpc · 发表于 2023-3-9 22:04:36

额风风风微风微风违法

81708585 · 发表于 2023-5-1 12:55:52

额UI废物iuhfujewfiewnnfen

u6h2m4 · 发表于 2023-6-6 16:03:58

儿童服务绯闻绯闻绯闻

fwn2rd · 发表于 2023-8-24 21:32:06

刷屏刷屏刷屏

pwseqn1h · 发表于 2023-9-17 02:07:59

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

账号		自动登录	找回密码
密码			立即注册

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

相关帖子