上周学习了Javascript，只是学习了点皮毛而已。这周学习了Jquery.学习到了Jquery操作Dom节点。然后。。然后学习到了隐藏和显示标签。于是想尝试能不能写的出京东商城的那个商品筛选功能。

那个筛选功能如图：

由于刚学习。所以技术不精。这里只实现以下两个功能

  1. 更多选项。点击切换收起选项。

  2. 点击条目在上面显示已点击条目。

首先是Html代码：这里主要的代码是：

     			
      
       笔记本
       
			
       				
        品牌：				
        					
         						
          
  •            
                联想
               
    • 						
              
  •            
                索尼
               
    • 						
              
  •            
                三星
               
    • 						
              
  •            
                尼康
               
    • 						
              
  •            
                松下
               
    • 						
              
  •            
                卡西欧
               
    • 						
              
  •            
                富士
               
    • 						
              
  •            
                柯达
               
    • 						
              
  •            
                宾得
               
    • 						
              
  •            
                理光
               
    • 						
              
  •            
                奥林巴斯
               
    • 						
              
  •            
                明基
               
    • 						
              
  •            
                爱国者
               
    • 						
              
  •            
                AAA
               
    • 						
              
  •            
                明基
               
    • 						
              
  •            
                爱国者
               
    • 						
              
  •            
                BBBB
               
    • 						
              
  •            
                明基
               
    • 						
              
  •            
                爱国者
               
    • 						
              
  •            
                其它
               
    • 																			
               
               价格： 
                
                 
                 
  •               
                   0-1000
                  
    •  
                 
  •               
                   1001-2000
                  
    •  
                 
  •               
                   2001-3000
                  
    •  
                 
  •               
                   3000-~
                  
    •     
                  
                  尺寸： 
                   
                    
                    
  •                  
                      14
                     
    •  
                    
  •                  
                      15.6
                     
    •  
                    
  •                  
                      21
                     
    •  
                    
  •                  
                      29
                     
    •     
                     
                     触控： 
                      
                       
                       
  •                     
                         普通触控
                        
    •  
                       
  •                     
                         PC平板二合一
                        
    •  
                       
  •                     
                         非触控
                        
    •     
                        
                        处理器： 
                         
                          
                          
  •                        
                            Intel i3
                           
    •  
                          
  •                        
                            Intel i5
                           
    •  
                          
  •                        
                            Intel i7
                           
    •  
                          
  •                        
                            AMD A6
                           
    •     
                           
                           厚度： 
                            
                             
                             
  •                           
                               刀锋轻薄
                              
    •  
                             
  •                           
                               便携轻薄
                              
    •  
                             
  •                           
                               普通轻薄
                              
    •     
                              
                              显卡： 
                               
                                
                                
  •                              
                                  入门级独显
                                 
    •  
                                
  •                              
                                  性能级独显
                                 
    •  
                                
  •                              
                                  玩家级独显
                                 
    •     
                                 
                                 大家说： 
                                  
                                   
                                   
  •                                 
                                     配置不错
                                    
    •  
                                   
  •                                 
                                     散热很好
                                    
    •  
                                   
  •                                 
                                     外观不错
                                    
    •  
                                   
  •                                 
                                     屏幕大
                                    
    •     
                                    
                                    
                                     更多选项（处理器，厚度，显卡，大家说)

    CSS代码：

    Css代码我就不去解释了。

    这里主要是Jquery代码。可能我的方法不是很到位，希望各位见谅啊。有更好的可以盖楼。一定改进的。

    $(document).ready(function() {        //定义一个数组。用于存放每个条目的内容	var arr = new Array();	//初始化 刚开始就将第3个以后的隐藏起来。	var $category = $("div.attr:gt(3)");	$category.hide();	//详细和精简的切换代码。	$("div.showmore > a").click(function() {		if (!$category.is(":visible")) {			$category.show();			$(".showmore a span").css("background", "url(./img/up.gif) no-repeat 0 0").text("收起");		} else {			$category.hide();			$(".showmore a span").css("background", "url(./img/down.gif) no-repeat 0 0").text("更多选项（处理器，厚度，显卡，大家说)");		}	});        //从这里开始就是响应点击条目的事件了。	$("#pingpai > li >a").click(function() {	        //先清空div		$(".mt div").empty();                arr[0] = $(this).text();		print_r();	});	$("#price > li").click(function() {		$(".mt div").empty();		arr[1] = $(this).text();		print_r();	});	$("#chicun > li").click(function() {		$(".mt div").empty();		arr[2] = $(this).text();		print_r();	});	$("#chukong > li").click(function() {		$(".mt div").empty();		arr[3] = $(this).text();		print_r();	});	$("#cpu > li").click(function() {		$(".mt div").empty();		arr[4] = $(this).text();		print_r();	});	$("#height > li").click(function() {		$(".mt div").empty();		arr[5] = $(this).text();		print_r();	});	$("#xiankao > li").click(function() {		$(".mt div").empty();		arr[6] = $(this).text();		print_r();	});	$("#allspeak > li").click(function() {		$(".mt div").empty();		arr[7] = $(this).text();		print_r();	});        //循环打印数组	function print_r() {		if (arr.length > 0) {			for (var i = 0; i < arr.length; i++) {				if (arr[i] != undefined) {					var txt = $("
         
          ").text(arr[i]);					$(".mt div").append(txt).fadeIn();				}			}		}	}	//jquery动态响应点击事件，响应点击之后删除条目	$(document).on('click', 'b', function() {		arr[$(this).attr("name")] = undefined;		$("b[name='" + $(this).attr("name") + "']").fadeOut(500);	});});

    所有的核心代码都在这里了。欢迎交换想法。另外附上×××：