在一些电商网站或者是分类信息网站上不难看到他们的导航都是显示一些大分类，在点击进入子页面的时候，又分成了很多小的分类，通常在这些小的分类下面还会显示点击查看更多品牌/隐藏品牌的功能。看起来很友好，又高大上。其实制作这么一个效果并不难，简单的几行Jquery代码即可搞定。下面咱们就来分析一下如何来完成这个高大上的效果。
①打开页面的时候，显示精简的品牌列表；品牌列表下面有一个显示更多的按钮；
②当点击产品下方“显示全部品牌的时候”显示全部的品牌。其实还可以添加很多其他的效果，比如栏目加亮，背景色等等。
首先我们需要用HTML代码来实现这么一个结构，用css来控制它的样式，让其显示起来更加的美观；且看代码：
<div class="subcategorybox">
<ul>
<li><a href="">佳能</a></li>
<li><a href="">索尼</a></li>
<li><a href="">三星</a></li>
<li><a href="">苹果</a></li>
<li><a href="">尼康</a></li>
<li><a href="">松下</a></li>
<li><a href="">卡西欧</a></li>
<li><a href="">富士康</a></li>
<li><a href="">柯达</a></li>
<li><a href="">理光</a></li>
<li><a href="">宾得</a></li>
<li><a href="">奥林巴斯</a></li>
<li><a href="">明基</a></li>
<li><a href="">其他品牌</a></li>
</ul>
</div>
<div class="showmore"><a href="more.html"><span>显示全部品牌</span></a></div>
接下来我们用Jquery为这个页面添加一些交互效果，点击“显示全部”的时候显示全部品牌列表，且文本切换为“显示全部”替换为“精简显示”，点击的时候隐藏品牌列表，Jquery代码如下：
<script type="text/javascript">
$(function(){
var $category = $("ul li:gt(5):not(:last)").hide(); //从第七个元素开始-倒数第二个结束，隐藏这些元素
$(".showmore > a").toggle(function(){
$category.show();//显示隐藏的品牌
$(this).find("span").text("隐藏显示品牌");
//$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('苹果')").css("background","red");
return false; //超链接不跳转
},function(){
$category.hide();//隐藏部分品牌
$(this).find("span").text("显示全部品牌");
//$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('苹果')").css("background","none"); 这部分内容为筛选项目品牌加亮。
});
});
</script>
这样，就实现了一个简单的点击显示/隐藏品牌列表的功能，当然也可以添加一些其他的高端功能，比如：淡入淡出，拖拽显示等等。下面我来解释一下上面的代码。
大家都清楚，淘宝的列表是显示一部分，隐藏一部分，我们这个是从第7个开始隐藏后面的元素。
:gt(5)这个是过滤选择器，选取索引大于5的元素，大家都知道索引是从0开始的，5就是第6个元素，大于第6个元素，那么就是第7个。
:not，:last这两个都是过滤选择器，:not(:last)这句代码的意思就是排除最后一个。
hide()隐藏。
find(‘span’).text(‘xxxx’)查找span元素把里面的文本内容替换成xxxx。
toggle()是一个函数，用来交替一组动作，也就是点击显示，再点击隐藏。
css(name,value)设置元素的样式。
filter()筛选出与指定表达式匹配的元素集合。
:contains(‘text’)内容过滤选择器，选取文本内容含有text的元素。
好了简单的解释了下代码的意思，注释的一段代码是实现栏目加亮的。感兴趣的朋友可以自己测试一下。