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