jQuery实现HTML元素隐藏和显示 jQuery实现HTML元素隐藏和显示

让我们来模仿一下淘宝网当你搜索某个商品的时候，那种显示全部品牌和显示部分品牌的功能。
首先我们来理清一下思路：
1、一开始需要先隐藏需要隐藏的元素
2、你需要通过jquery获取需要在开始显示的时候需要隐藏的元素对象
3、在页面写一个可以触发点击事件的按钮或者链接，使用jquery为这个按钮或者链接添加点击事件
4、当按钮被点击的时候，获取需要隐藏的对象当前是否隐藏值
【jQuery实现HTML元素隐藏和显示】5、如果是隐藏的，则使其显示，若不是隐藏的，则让它隐藏。
下面我们来看代码：

- 锐客网*{ 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 { clear:both; text-align:center; padding-top:10px; }.showmore 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 0; }.promoted a { color:#F50; }
C
C++
C#
JAVA
JAVASCRIPT
Python
PHP
GO
SWIFT
RUBY
HTML
汇编
PERL
其它编程语言
显示全部语言

一开始打开是这样

文章图片

点击链接之后触犯事件函数，那个小三角形是一个图片，根据状态的不同，显示不同的图片，上面的代码有写

文章图片

if里面
$(".showmore a span").css("background","url(img/up.gif) no-repeat 0 0")

else里面
$(".showmore a span").css("background","url(img/down.gif) no-repeat 0 0")

当然链接的文字也发生了改变，这都是需要注意的细节
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。