jQuery 实现折叠面板效果

最新推荐文章于 2023-04-08 08:17:18 发布

Dewey666

最新推荐文章于 2023-04-08 08:17:18 发布

阅读量876

点赞数

分类专栏：效果初现文章标签：折叠面板 toggle

本文链接：https://blog.csdn.net/IT666DHW/article/details/78241113

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

	<!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=utf-8" />
	<title>jQuery 实现折叠面板效果</title>
	<script type="text/javascript" src="jquery-2.1.0.js""></script>
	<style type="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>

	<script type="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>
	<div class="content">
	<div class="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>