本文介绍了一种利用jQuery来实现网页中dl元素展开和折叠效果的方法。通过点击dt元素可以控制其后的dd元素的显示与隐藏，并且加入了动画效果提升用户体验。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3.min.js" ></script>
</head>
<script>
$(function(){
$("dd").hide();
$("dt").click(function(){
if($(this).next().is(":hidden"))
{
$(this).next().slideDown(1000);
}else
{
$(this).next().slideUp(1000);
}
});
});
</script>
<body>
<dl>
<dt>产品中心</dt>
<dd>
<div>产品</div>
<div>产品</div>
<div>产品</div>
</dd>
<dt>新闻中心</dt>
<dd>
<div>新闻</div>
<div>新闻</div>
<div>新闻</div>
</dd>
<dt>金钱中心</dt>
<dd>
<div>金钱</div>
<div>金钱</div>
<div>金钱</div>
</dd>
</dl>
</body>
</html>
转载于:https://www.cnblogs.com/index0629/p/8600664.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
