手风琴特效
来源：互联网 发布：百度cdn端口 编辑：程序博客网 时间：2024/06/06 01:44
只需要引入jquery-1.3.2.min.js即可实现效果；
<head>
<title></title>
<style type="text/css">
dl { width: 150px; }
dl,dd { margin: 0; }
dt { background: gray; font-size: 14px; padding: 2px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000;font-size: 12px; }
ul { list-style: none; padding: 2px; }
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("dd:not(:first)").hide();
$("dt a").click(function () {
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
})
})
</script>
</head>
<body>
<dl>
<dt><a href="#">水果</a></dt>
<dd>
<ul>
<li><a href="#">苹果</a></li>
<li><a href="#">梨子</a></li>
<li><a href="#">桃子</a></li>
<li><a href="#">菠萝</a></li>
<li><a href="#">西瓜</a></li>
<li><a href="#">葡萄</a></li>
</ul>
</dd>
<dt><a href="#">颜色</a></dt>
<dd>
<ul>
<li><a href="#">红色</a></li>
<li><a href="#">绿色</a></li>
<li><a href="#">蓝色</a></li>
<li><a href="#">白色</a></li>
<li><a href="#">橙色</a></li>
<li><a href="#">紫色</a></li>
</ul>
</dd>
<dt><a href="#">班级</a></dt>
<dd>
<ul>
<li><a href="#">net</a></li>
<li><a href="#">php</a></li>
<li><a href="#">java</a></li>
<li><a href="#">3G</a></li>
<li><a href="#">嵌入式</a></li>
<li><a href="#">对日</a></li>
</ul>
</dd>
</dl>
</body>
</html>
下面就是效果图：
- 手风琴特效
- 手风琴特效
- 手风琴JS特效源码
- JQ实现手风琴特效
- 手风琴特效练习
- css实现手风琴图片特效
- 动画特效十四：手风琴效果
- 分享Jquery实现网格手风琴特效
- 简单几句JQuary搞定手风琴特效
- 推荐一款优雅的jquery手风琴特效
- 一款优雅的jquery手风琴特效
- jQuery图片手风琴特效一行代码搞定
- Bootstrap3扁平风格垂直手风琴特效
- 用jquery封装的手风琴特效插件
- jQuery手风琴图切换特效插件
- 手风琴
- 手风琴
- 手风琴
- Unity3d Android加入广告和调用Android代码的方法。详细讲解！
- 游戏后台开发九问--linux平台
- Java学习笔记：for-each增强for循环
- 通过扩展 Rational Functional Tester 对 Adobe Flex 或 Flash 应用程序进行测试
- Linux命令学习手册-objcopy命令
- 手风琴特效
- 我编程，我快乐：程序员职业规划之道（一）
- 二叉树前序、中序、后序遍历相互求法
- Ubuntu 12.04安装Ubuntu Tweak 0.7.0指南(转载)
- (int *)(&a+1)
- mysql存储过程
- 最长回文串模版
- 何为面向对象的编程思想。
- 图片拖出相框，自动消失
