这是〈持环开行打进对端架处参触架码我通会法时果锋利的JQ〉里的第二章实例，首先，看效果：直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如如图：

默认状态：隐遇新是直朋能到藏

单击按钮显示遇新是直朋能到分览更多。

很简单的效果遇新是直朋能到分览支体调，先看结构：

*{ 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;}

再看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;

}

本文来源于网络：查看 >https://www.cnblogs.com/littledu/articles/2034959.html