jQuery点击展开收起代码实例
分类：实例代码
本章节分享一段代码实例，它实现了点击展开和收缩的效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.line {
width: 1000px;
overflow: hidden;
margin: 0 auto;
background-color: #F7F5F5;
border: 1px solid #e6e2e1;
}
.line .type {
margin-top: 17px;
text-indent: 27px;
width: 12%;
float: left;
}
.line .type_value {
position: relative;
float: left;
background-color: #FFF;
width: 88%;
overflow: hidden;
}
.line .type_value ul {
margin-right: 50px;
}
.line .type_value ul .collapse {
max-height: 58px;
overflow: hidden;
}
.line .type_value ul li {
display: block;
margin: 0 5px 8px 0;
width: 180px;
overflow: hidden;
float: left;
height: 22px;
line-height: 22px;
}
.line .type_value ul li a {
position: relative;
color: #806F66;
display: inline-block;
padding: 1px 20px 1px 4px;
line-height: 20px;
height: 20px;
white-space: nowrap;
text-decoration: none;
}
.line .type_value ul li a:hover {
color: #e4393c;
}
.line .type_value ul .none {
display: none;
}
.line .type_value ul .block {
display: block;
}
.line .type_value .option {
position: absolute;
right: 0;
top: 17px;
width: 105px;
z-index: 1;
}
.line .type_value .option a {
text-decoration: none;
color: #806F66;
}
.line .type_value .option a:hover {
color: #e4393c;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
$('.option a').click(function () {
if ($(this).text() == '更多') {
$(this).text("收起");
$('.collapse').find('.none').addClass('block');
} else {
$(this).text("更多");
$('.collapse').find('.block').removeClass('block').addClass('none');
}
});
});
</script>
</head>
<body>
<div class="line">
<div class="type">相关类型</div>
<div class="type_value">
<ul class="collapse">
<li><a href="javascript:void(0)">不限</a></li>
<li><a href="javascript:void(0)">前端教程网</a></li>
<li><a href="javascript:void(0)">前端教程网</a></li>
<li><a href="javascript:void(0)">前端教程网</a></li>
<li class="none"><a href="javascript:void(0)">前端教程网</a></li>
<li class="none"><a href="javascript:void(0)">前端教程网</a></li>
<li class="none"><a href="javascript:void(0)">前端教程网</a></li>
<li class="none"><a href="javascript:void(0)">前端教程网</a></li>
<li class="none"><a href="javascript:void(0)">前端教程网</a></li>
<li class="none"><a href="javascript:void(0)">前端教程网</a></li>
<li class="none"><a href="javascript:void(0)">前端教程网</a></li>
</ul>
<div class="option"><a href=" javascript:void(0)">更多</a></div>
</div>
</div>
</body>
</html>
jQuery点击展开收起代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery点击展开收起代码实例就介绍到这了。
jQuery点击展开收起代码实例属于前端实例代码，有关更多实例代码大家可以查看。