jQuery 实现折叠面板效果
来源：互联网 发布：php shell exec 输出 编辑：程序博客网 时间：2024/05/16 05:38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>jQuery 实现折叠面板效果</title>
<scripttype="text/javascript"src="jquery-2.1.0.js""></script>
<styletype="text/css">
* { margin:0px; padding:0px; }
body { background:transparent url('images/bg.gif') repeat scroll left top;font-size:14px; }
ul, li, p, h1, h2, h3, div{ list-style:none; padding:0px; margin:0px; }
.content { width:596px; _height:430px; min-height:430px; margin:0 auto; border:2px solid #AAAA00; border-top:none; background-color:#FFFFFF; overflow:hidden; }
.toggle { width:450px; margin:20px auto; }
.toggle dl dt { background:#F4FFF4 url('images/bg_toggle_up.gif') no-repeat scroll 8px 14px; height:40px;width:450px; line-height:40px; font-size:16px; font-weight:bold; color:#006600; cursor:pointer; margin:8px 0; padding-left:25px; display:block; }
.toggle dl dt.current { background:#F4FFF4 url('images/bg_toggle_down.gif') no-repeat scroll 8px 14px; }
.toggle dl dd { padding-left:10px; line-height:24px; }
.toggle dl dd h2 { font-size:15px; }
.toggle dl dd ul { padding-bottom:12px; }
.toggle dl dd ul li { list-style:decimal inside none; }
</style>
<scripttype="text/javascript">
$(function(){
$(".toggle dl dd").hide();
$(".toggle dl dt").click(function(){
$(".toggle dl dd").not($(this).next()).hide();
$(".toggle dl dt").not($(this).next()).removeClass("current");
$(this).next().slideToggle(500);
$(this).toggleClass("current");
});
});
</script>
</head>
<body>
<divclass="content">
<divclass="toggle">
<dl>
<dt>简介一：亚洲</dt>
<dd>
<h2>主要国家：</h2>
<ul>
<li>中国，印度，日本，沙特阿拉伯等；</li>
</ul>
<h2>面积：</h2>
<ul>
<li>4457.9万平方公里；</li>
</ul>
</dd>
<dt>简介二：欧洲</dt>
<dd>
<h2>主要国家：</h2>
<ul>
<li>英国、法国、德国等；</li>
</ul>
<h2>面积：</h2>
<ul>
<li>1016万平方公里；</li>
</ul>
</dd>
<dt>简介三：非洲</dt>
<dd>
<h2>主要国家：</h2>
<ul>
<li>埃及、南非、肯尼亚、尼日利亚等；</li>
</ul>
<h2>面积：</h2>
<ul>
<li>3020万平方千米（包括附近岛屿）；</li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
阅读全文
0 0
- jQuery 实现折叠面板效果
- jQuery实现的简单折叠菜单(折叠面板)效果代码
- jQuery实现折叠效果
- 使用jQuery实现顺滑折叠面板
- Jquery实现的一个DIV层面板的折叠/展开效果
- jQuery之折叠面板
- Jquery Accordion 折叠面板
- css实现折叠面板
- MUI-折叠面板效果accordion
- Jquery插件--实现面板模拟效果
- jQuery插件--实现tabs面板效果
- jquery插件实现面板切换效果
- 用wxPython实现折叠面板
- 【jQuery基础编程】jQuery-UI实现折叠面板里的控件拖曳
- jquery插件面板效果
- jquery面板效果插件
- jquery面板效果
- jquery插件面板效果
- 浮动之摄影社区热门小镇
- Java常见异常(Runtime Exception )小结
- 解决springboot+jpa+hibernate启动时报错:MySQLSyntaxErrorException: Specified key was too long; max key lengt
- 面试宝典 （PART V）迷途指针和空指针
- Django-01
- jQuery 实现折叠面板效果
- python学习总结
- PHP对XML增删改查功能实现
- MariaDB实现主从复制
- 第七周项目2
- switch编写不带界面计算器
- 错误 -6
- 关于极路由的DNS_PROBE_FINISHED_NXDOMAIN 错误问题
- 科学计算库Numpy-数据结构
