本文主要介绍jQuery使用hide()和toggle()函数实现相机品牌展示的隐藏功能。本文通过示例代码向您详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
最近在学习jQuery的时候接触到了show()、hide()和toggle()函数，于是练习了一个使用这些函数让元素显示和隐藏的案例：
提示：代码中开关按钮上下的小图标可以在这个链接品牌展示功能图中获得。
！声明文档类型
html lang=’en ‘
头
meta charset=’UTF-8 ‘
使用titlehide()和toggle()函数实现相机品牌显示/标题。
style type=’text/css ‘
* {
边距：0；
填充：0；
}
正文{
字体大小：12px
文本对齐：居中；
}
一个{
颜色：# 04D
文字-装饰：无；
}
答：悬停{
颜色：# F50
/*text-decoration属性指定修饰、下划线、下划线、删除线等。添加到文本中。*/
文本装饰：下划线；
}。子类别箱{
宽度：600px
边距：0自动；
文本对齐：居中；
边距-顶部：40px
}。子类别框ul {
列表样式：无；
}。子类别箱ul li {
显示：块；
浮动：左；
宽度：200px
行高：20px
}。showmore，无显示{
明确：两者都有；
文本对齐：居中；
填充顶部：10px
}。showmore a，无表情的
显示：块；
宽度：120px
边距：0自动；
行高：24px
边框：1px纯色# AAA
}。显示更多span {
左填充：15px
/*最后两位数偏移左上角坐标(0，0)。
第一个数字是X轴上的偏移量，即横向偏移量。正表示右，负表示左！
第二个数字是Y轴上的偏移量，即横向偏移量，向下为正，向上为负！*/;
背景：url(img/down.gif)无重复0 3px
}。没有显示的跨度{
左填充：15px
背景：url(img/up.gif)无重复0 3px
}。提升了{
颜色：# F50
}
/风格
script type=’ text/JavaScript ‘ src=’ https://apps . BD img . com/libs/jquery/2 . 1 . 4/jquery . min . js ‘/script
脚本类型=’文本/javascript ‘
$(function () {
//页面加载时先隐藏一些相机品牌。
$(‘ul li:gt(5):not(:last)’)。hide()；
filter函数筛选出与指定表达式匹配的元素集。该方法用于缩小匹配范围。用逗号分隔多个表达式。
//这里筛选出需要单独添加样式的相机品牌。
Var promoted=$ (‘li ‘)。滤镜(‘:包含(‘佳能’)，包含(‘索尼’)，包含(‘柯达’)；
//获取标签绑定click事件。
div div a ‘)。单击(函数(){
//切换显示和隐藏某些相机品牌。
$(‘ul li:gt(5):not(:last)’)。切换()；
//隐藏部分相机品牌时，替换文字内容，边角图片，去掉李下的A标签文字样式。
if ($(‘ul li:gt(5):not(:last)’)。is(‘:hidden ‘){
$(‘一个跨度’)。html(‘显示所有品牌’)；
$(‘div div ‘)。remove class()；
$(‘div div ‘)。add class(‘ showmore ‘)；
$(多推进)。remove class(‘ promoted ‘)；
}否则{
//显示某些相机品牌时，替换文字内容，边角图片，在李下增加标签文字样式。
$(‘一个跨度’)。html(‘展示流线型品牌’)；
$(‘div div ‘)。remove class()；
$(‘div div ‘)。add class(“showless”)；
$(多推进)。add class(“promoted”)；
}
});
});
/脚本
/头
身体
div class=’SubCategoryBox ‘
保险商实验所
Lia=’ #’ Canon /ai(30440) /i/li
Href=’ # ‘索尼/ai(27220) /i/li
Lia=’ # ‘三星/ai(20808)/I/李
Lia=’ # ‘尼康/ai(17821) /i/li
Href=’ # ‘松下/ai(12289)/I/李
Href=’ # ‘卡西欧/ai(8242)/I/李
Href=’ #’ Fuji /ai(14894) /i/li
Lia=’ # ‘柯达/ai(9520) /i/li
Href=’ # ‘宾得/ai(2195) /i/li
Lia=’ # ‘理光/ai(4114) /i/li
Href=’ #’ Olympus /ai(12205) /i/li
Lia=’ # ‘明基/艾(1466)/我/李
Href=’ # ‘爱国者/ai(3091)/I/李
Lia=’ # ‘其他品牌相机/ai(7275) /i/li
/ul
div class=’showmore ‘
a href=’ # ‘ span显示所有品牌/span/a
/div
/div
/body
/html
关于jQuery使用hide()和toggle()函数实现相机品牌展示隐藏功能的这篇文章到此为止。更多信息，jQuery使用hide()和toggle()函数实现相机品牌展示的隐藏功能。请搜索脚本之家之前的文章或继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/article/204997.htm
