jquery 点击显示隐藏的三种方法
jquery点击显示隐藏的三种方法，从复杂到简单。使用jquery需要引用jquery库，如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>。
旁边按钮随着收缩展开发生状态变化，展开+变—，收缩—变+。
收缩效果：
展开效果：
一、HTML结构（盗用网上的）
<body>
<!-- 收缩展开效果 -->
<li class="box">
<h1>收缩展开效果<span class="shrinkBox_open "></span></h1>
<p class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
</p>
</li>
<br />
<div class="box">
<h1>收缩展开效果<span class="shrinkBox_open "></span></h1>
<div class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
5<br />
</div>
</div>
<br>
</body>
二、css渲染
<style>
.text{
display:none;
}
.shrinkBox_open{
display:block;
background:url(shrinkBox_open.png) no-repeat;
height:25px;
background-size:25px;
position:relative;
top:-26px;
left:90%;
}
.shrinkBox_close{
background:url(shrinkBox_close.png) no-repeat;
background-size:25px;
}
</style>
三、JS文件
1、该方法调用animate动画，完成展开收缩效果。利用addClass与removeClass动态添加样式，进行+与-的切换。
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$(".box h1").click(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "");
if($(this).find(".shrinkBox_open").hasClass("shrinkBox_close"))
{$(this).find(".shrinkBox_open").removeClass("shrinkBox_close");}
else
{ $(this).find(".shrinkBox_open").addClass("shrinkBox_close");}
});
});
2、利用toggleClass动态添加样式，进行+与-的切换
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$(".box h1").click(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "");
$(this).find(".shrinkBox_open").toggleClass("shrinkBox_close");
});
});
3.调用slideToggle()，完成展开收缩效果
<script type="text/javascript">
$(document).ready(function(){
$(".box h1").click(function(){
$(this).next(".text").slideToggle();
$(this).find(".shrinkBox_open").toggleClass("shrinkBox_close");
});
});
</script>
