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

最新推荐文章于 2024-09-05 16:06:51 发布

weixin_30800987

最新推荐文章于 2024-09-05 16:06:51 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/liwanyu/archive/2009/12/18/1627179.html

本文介绍了一个使用jQuery实现的下拉菜单动画效果，包括淡入淡出及展开收缩功能。通过简单的HTML结构配合jQuery代码，实现了鼠标悬停时子菜单的显示与隐藏动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

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

转载于:https://www.cnblogs.com/liwanyu/archive/2009/12/18/1627179.html