53、实例 jQuery设计折叠效果

最新推荐文章于 2023-04-23 23:47:37 发布

xuxianmei

最新推荐文章于 2023-04-23 23:47:37 发布

阅读量602

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/tlxxm/article/details/37658609

版权

jQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery设计折叠效果</title>
<script type="text/javascript" src="jquery-2.1.0.js">
</script>
<script>
//总结：1、eahc默认自带两个参数，一个是下标，一个是对象本身(节点)，不过是DOM对象，如果要使用jQuery的方法，需要加上 $()
$(document).ready(function(e) {
    var t=[];
	//注：一个dt 配合 一个dd 这种格式的都行,当然这里加了class，指定某一个里面的
	var dt=$("dl.collapse dt");
	var dd=$("dl.collapse dd");
	dt.each(function(index,element) { //each(迭代集合中的每一个集合)自带两个参数，一个下标，一个是当前元素
        t[index]=false;//设置是否折叠标志 初始为否		
		$(dt[index]).click( function(e){
		if(t[index])
		{
							
			t[index]=false;
			$(dd[index]).show(2000);//数组对象元素(DOM对象)必须将其转换为 jQuery对象才能使用jQuery方法 
			
		}
		else
		{
			
			//alert($(dd[index]).html());
			$(dd[index]).hide(2000);
			t[index]=true;
		}
		

        } );
    });
	

});

</script>
</head>

<body>
<dl class="collapse">
<dt>标题栏</dt>
<dd>内容框<br/>
<img src="images/android.jpg"/></dd>
<dt>标题栏</dt>
<dd>内容框<br/>
<img src="images/android.jpg"/></dd>
<dt>标题栏</dt>
<dd>内容框<br/>
<img src="images/android.jpg"/></dd>

</dl>
</body>
</html>