jQuery选择器实例应用

刚学完jQuery选择器，闲来无事，照着书上的范例敲了一段代码（HTML和CSS抄自书上），自己试着写了写jQuery的代码，感觉相当轻便啊。

显示效果：

功能说明：

　　1、点击上边的图书分类一栏，实现向下的伸缩扩展，可以控制分类的显示状态；

　　2、“简化”功能点击后实现分类显示菜单数量的简化，简化后，简化字样变成“展开”；

　　3、页面中的两个红色箭头图标均为显示状态的图标，每次点击后都会变换相应的状态效果。

代码实现：

  
  
  
  



  body{font-size:13px}
  #divframe{border:solid 1px #666;width:301px;overflow:hidden}
  #divframe .clsHead{background-color:#eee;padding:8px;height:18px;cursor:pointer}
  #divframe .clsHead h3{padding:0px;margin:0px;float:left}
  #divframe .clsHead span{float:right;margin-top:3px}
  #divframe .clsContent{padding:8px}
  #divframe .clsContent ul{list-style-type:none;margin:0px;padding:0px}
  #divframe .clsContent ul li{float:left;width:95px;height:23px;line-height:23px}
  #divframe .clsBot{float:right;padding-top:5px;padding-bottom:5px}
  .GetFocus{background-color:#eee}




  
    图书分类
    
  
  
    

      
小说(1110) 
      
文艺(230) 
      
青春(1430) 
      
少儿(235) 
      
生活(7809) 
      
社科(876) 
      
管理(1234) 
      
计算机(2434) 
      
教育(234) 
      
工具书(7665) 
      
引进版(4557) 
      
其他类(4543) 
    
    简化
      
    
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。