《锋利的JS》 之 单击显示隐藏
这是〈锋利的JQ〉里的第二章实例，首先，看效果：如图：
默认状态：隐藏
单击按钮显示更多。
很简单的效果，先看结构：
<style type="text/css">
*{ 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{ float:left; width:200px; line-height:20px;}
.showmore{ clear:both; text-align:center; padding-top:10px; zoom:1;}
.showmore a{ display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #aaa;}
.showmore a span{ padding-left:15px; background:url(images/down.gif) no-repeat;}
.promoted a{ color:#f50;}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li class="test"><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>
</body>
再看JQ代码：
$(function(){
var $category = $('ul li:gt(5):not(:last)');
$category.hide();
var $toggleBtn = $('div.showmore > a');
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide();
$('.showmore > a span').css("background","url(images/down.gif) no-repeat")
.text("显示全部品牌");
$('ul li').removeClass("promoted");
}else{
$category.show();
$('.showmore a span')
.css("background","url(images/up.gif) no-repeat 0 0")
.text("精简显示品牌");
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted");
}
return false;
})
})
JQ很简单不解释，接下来，是我的JS仿写。
从效果和JQ代码中，我们都可以总结出实现这功能的思路出来：
1.获取第7个li到倒数第二个li，隐藏之。
2.获取按钮a元素，单击时显示更多，并修改按钮样式和给一些内容添加样式。
直接看代码吧：
window.onload = function(){
var list = document.getElementsByTagName('li'); //获取页面上的li
var btn = getElementsByClassName('showmore')[0].getElementsByTagName('a')[0]; //获取按钮a
var span = btn.getElementsByTagName('span')[0]; //获取a里面的span
var flag = true; //用以控制显示和隐藏切换
showHidden(list,'none'); //一个显示隐藏函数，由于多次出现，所以弄成函数
btn.onclick = function(){
if(flag){
showHidden(list,'block'); //单击时，显示出隐藏内容
for(var i = 0,l = list.length; i < l; i++){ //遍历所有内容，寻找匹配的内容，添加样式
var str = list[i].innerHTML;
if(str.indexOf("佳能") != -1 || str.indexOf("尼康") != -1 || str.indexOf("奥林巴斯") != -1){
addClass('promoted',list[i]);
}
}
span.innerHTML = "精简显示品牌"; //改变内容
span.style.background = "url(images/up.gif) no-repeat";
flag = false;
}else{
showHidden(list,'none');
for(var i = 0,l = list.length; i < l; i++){
var str = list[i].innerHTML;
if(str.indexOf("佳能") != -1 || str.indexOf("尼康") != -1 || str.indexOf("奥林巴斯") != -1){
removeClass("promoted",list[i]); //移除样式
}
}
span.innerHTML = "显示全部品牌";
span.style.background = "url(images/down.gif) no-repeat";
flag = true;
}
}
}
function showHidden(list,type){ //显示隐藏函数
for(var i = 6, l = list.length - 1; i < l; i++){
list[i].style.display = type;
}
}
function getElementsByClassName(className,node){ //通过类名获取对象
node = node || document;
if(node.getElementsByClassName){
return node.getElementsByClassName(className);
}
var eles = node.getElementsByTagName('*');
var reg = [];
for(var i = 0,l = eles.length; i < l; i++){
if(hasClass(className,eles[i])){
reg.push(eles[i]);
}
}
return reg;
}
function hasClass(className,node){ //判断对象节点是否有某个类
var eles = node.className.split(/\s+/);
for(var i = 0,l = eles.length; i < l; i++){
if(eles[i] == className){
return true;
}
}
return false;
}
function addClass(className,node){ //添加样式
return node.className += " " + className;
}
function removeClass(className,node){ //删除样式
eles = node.className.split(/\s+/);
for(var i = 0,l = eles.length; i < l; i++){
if(eles[i] == className){
eles.splice(i,1);
}
}
node.className = eles.join(" ");
return node;
}
