技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
jquery 收缩 collapse 插件--------原创
举例说明:
http://www.6yang.net/myjavascriptlib/collaspe/#~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>收缩 collapse 插件--------原创</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.list{
}
.content{
display:none;
}
.close.red{
color:#f30;
}
.content.show{
display:block;
}
</style>
<script type="text/javascript">
$(function(){
$.fn.collapse = function(arr){
this.each(function(){
var self = $(this);
self.click(function(){
self.addClass(arr.switchBtn).closest(arr.item).find(arr.content).toggle(0,
function(){
var selfContent = $(this);
if(selfContent.is(":visible")){
self.addClass(arr.switchBtn);
}else{
self.removeClass(arr.switchBtn);
}
}
);
return;
});
});
return this;
}
$(".close").collapse({ //操作节点极其内容的相关参数 所有参数都提供默认值
item:'.item',
switchBtn:'red',
content:'.content'
});
});
</script>
</head>
<body>
<div class="list">
<ul>
<li class="item"><a href="#~" class="close red">Open</a><div class="content show">Short DescriptionShort Description</div></li>
<li class="item"><a href="#~" class="close">Open</a><div class="content">Short DescriptionShort Description</div></li>
<li class="item"><a href="#~" class="close">Open</a><div class="content">Short DescriptionShort Description</div></li>
<li class="item"><a href="#~" class="close">Open</a><div class="content">Short DescriptionShort Description</div></li>
</ul>
</div>
</body>
</html>