jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能

最近在学习jQuery时接触到了show()、hide()、toggle()函数，于是利用这几个函数练习了一个使元素显示隐藏的案例：

小提示：代码中切换按钮上下的小图标可以在此链接品牌展示功能图片中获取

  
  
  
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-size: 12px;
      text-align: center;
    }

    a {
      color: #04D;
      text-decoration: none;
    }

    a:hover {
      color: #F50;
      
      text-decoration: underline;
    }

    .SubCategoryBox {
      width: 600px;
      margin: 0 auto;
      text-align: center;
      margin-top: 40px;
    }

    .SubCategoryBox ul {
      list-style: none;
    }

    .SubCategoryBox ul li {
      display: block;
      float: left;
      width: 200px;
      line-height: 20px;
    }

    .showmore, .showless {
      clear: both;
      text-align: center;
      padding-top: 10px;
    }

    .showmore a, .showless a {
      display: block;
      width: 120px;
      margin: 0 auto;
      line-height: 24px;
      border: 1px solid #AAA;
    }

    .showmore a span {
      padding-left: 15px;
      ;
      background: url(img/down.gif) no-repeat 0 3px;
    }

    .showless a span {
      padding-left: 15px;
      background: url(img/up.gif) no-repeat 0 3px;
    }

    .promoted a {
      color: #F50;
    }
  
  
  



  

    
佳能(30440) 
    
索尼(27220) 
    
三星(20808) 
    
尼康(17821) 
    
松下(12289) 
    
卡西欧(8242) 
    
富士(14894) 
    
柯达(9520) 
    
宾得(2195) 
    
理光(4114) 
    
奥林巴斯(12205) 
    
明基(1466) 
    
爱国者(3091) 
    
其它品牌相机(7275) 

  
  
    显示全部品牌
  

代码运行效果：

功能展示效果：

到此这篇关于jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能的文章就介绍到这了,更多相关jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！