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("简化");
	  }
    
    })
                    
                
                
            
        
浙公网安备 33010602011771号