jquery实现隐藏,简化和更多

HTML代码:

<div class="box">
<div class="header">
<h3>图书分类</h3>
<span><img src="images/11_03.gif" height="20" width="20" alt="" /></span>
</div>
<div class="content">
<ul>
<li><a href="#">小说(1110)</a></li>
<li><a href="#">文艺(230)</a></li>
<li><a href="#">青春(1430)</a></li>
<li><a href="#">少儿(1560)</a></li>
<li><a href="#">生活(870)</a></li>
<li><a href="#">社科(1460)</a></li>
<li><a href="#">管理(1450)</a></li>
<li><a href="#">计算机(1780)</a></li>
<li><a href="#">教育(930)</a></li>
<li><a href="#">工具书(3450)</a></li>
<li><a href="#">引进版(980)</a></li>
<li><a href="#">其它类(3230)</a></li>
</ul>
<div class="bot">
<a href="#">简化</a>
</div>
</div>
</div>

jQuery代码:

$(".header").click(function() {
if($(".content").is(":visible")){
$(".header span img").attr("src","images/11_05.gif");
$(".content").css("display","none");
}else
{
$(".header span img").attr("src","images/11_03.gif");
$(".content").css("display","block");
}
})
$(".content .bot > a").click(function() {
if($(".content .bot > a").text()=="简化")
{
$("li :gt(4) :not(:last)").hide();
$(".bot>a").text("更多");
}else{
$("li :gt(4) :not(:last)").show();
$(".bot>a").text("简化");
}

})

原文地址:https://www.cnblogs.com/eyunhua/p/3710901.html