您的位置：首页 > Web前端 > JQuery

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

2009-12-18 14:33 387 查看

代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>jQuery淡入淡出、展开收缩菜单</title>
6 <style type="text/css">
7 ul li{list-style:none;}
8 ul li.menu{position:relative;width:120px;}
9 ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;}
10 ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style>
11 <script language="javascript" src="jquery.js"></script>
12 <script language="javascript" type="text/javascript">
13 $(document).ready(function(){
14 $(".menu").hover(
15 function(){
16 //$(".content").fadeIn(800); // 淡入
17 $(".content").slideDown(800); // 展开
18 },function(){
19 //$(".content").fadeOut(1000) // 淡出
20 $(".content").slideUp(1000)　　　 // 收缩
21 });
22 })
23 </script>
24 </head>
25 <body>
26 <ul>
27 <li class="menu">
28 <a>弹出菜单</a>
29 <ul class="content">
30 <li><a href="#">菜单内容1</a></li>
31 <li><a href="#">菜单内容2</a></li>
32 <li><a href="#">菜单内容3</a></li>
33 <li><a href="#">菜单内容4</a></li>
34 <li><a href="#">菜单内容5</a></li>
35 </ul>
36 </li>
37 </ul>
38 </body>
39 </html>
40

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航