本文主要介绍jQuery使用hide()和toggle()函数实现相机品牌显示的隐藏功能。本文通过示例代码给你非常详细的介绍，对你的学习或工作有一定的参考价值，有需要的朋友可以参考。

最近在学习jQuery的时候接触到了show()，hide()，toggle()函数，所以练习了一个用这些函数隐藏元素的案例：

提示：代码中开关按钮上下的小图标可以在这个链接的品牌显示功能图片中获得

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

标题使用隐藏()和切换()功能显示相机品牌/标题

style type='text/css '

* {

margin : 0；

padd : 0；

}

body {

font-size : 12px；

text-align:中心；

}

a {

color: # 04D

text-decoration : none；

}

a:hover {

color: # F50

/*text-decoration属性指定添加到文本中的修饰，如下划线、下划线、删除线等。*/

文本修饰：下划线；

}。SubCategoryBox {

宽度： 600 px；

margin: 0 auto

text-align:中心；

margin-top : 40px；

}。SubCategoryBox ul {

list-style : none；

}。SubCategoryBox ul li {

display:块；

向左浮动：

宽度： 200 px；

line-height : 20px；

}。showmore。不显示{

clear:两者；

text-align:中心；

padding-top : 10px；

}。showmore a，showless a {

display:块；

width: 120px

margin: 0 auto

line-height : 24px；

border: 1px实心# AAA

}。展示更多

padding-left : 15px；

/*最后两位数字由左上角的坐标(0，0)偏移

第一个数字是x轴上的偏移量，也就是水平偏移量，右为正，左为负！

第二个数字是Y轴上的偏移量，也就是水平偏移量，向下为正，向上为负！*/;

background : URL(img/down . gif)no-repeat 0 3px；

}。不炫耀

padding-left : 15px；

background : URL(img/up . gif)no-repeat 0 3px；

}。提升了a {

color: # F50

}

/style

脚本类型=' text/JavaScript ' src=' https://apps . bdimg.com/libs/jquery/2 . 1 . 4/jquery . min . js '/脚本

脚本类型='text/javascript '

$(function () {

//加载页面前隐藏一些相机品牌。

$(' ul Li : gt(5): not(: last)')。hide()；

//筛选器函数筛选出与指定表达式匹配的元素集。此方法用于缩小匹配范围。用逗号分隔多个表达式

//这里过滤掉需要单独添加款式的相机品牌