使用jquery进行列表的切换
(1)为代码添加css样式
(2)从第八条开始隐藏,当用户点击“显示全部品牌”的时候会显示隐藏的品牌(除了最后一条),并且进行文本的切换,高亮特定品牌。
(3)当用户点击“显示部分品牌”的时候会隐藏显示的品牌(除了最后一条),并且进行文本的切换,去除高亮。
$(function(){
var items=$('ul li:gt(6):not(:last)');//获取索引值大于6的集合对象(不包括最后一条)
items.hide();//隐藏获取到的对象
var toggleBtn=$('div.more>a'); //获取显示全部品牌按钮
toggleBtn.click(function(){
if(items.is(":visible")){
items.hide();
$(this).find('span').text("显示全部品牌");//改变文本
$('ul li').removeClass('active');//去掉高亮
}else{
items.show();
$(this).find('span').text("显示部分品牌");
$('ul li').filter(":contains('华为'),:contains('小米'),:contains('魅族')")
.addClass('active') ;
}
return false;//不进行超链接跳转
})
})
<div class="simplify">
<ul>
<li><a href="#">苹果</a><i>(1001)</i></li>
<li><a href="#">华为</a><i>(1002)</i></li>
<li><a href="#">三星</a><i>(1003)</i></li>
<li><a href="#">小米</a><i>(1004)</i></li>
<li><a href="#">索尼</a><i>(1005)</i></li>
<li><a href="#">vivo</a><i>(1006)</i></li>
<li><a href="#">坚果</a><i>(1007)</i></li>
<li><a href="#">乐视</a><i>(1008)</i></li>
<li><a href="#">魅族</a><i>(1009)</i></li>
<li><a href="#">诺基亚</a><i>(1010)</i></li>
<li><a href="#">摩托罗拉</a><i>(1011)</i></li>
<li><a href="#">海信</a><i>(1012)</i></li>
<li><a href="#">奇酷</a><i>(1013)</i></li>
<li><a href="#">其他品牌手机</a><i>(1032)</i></li>
</ul>
<div class="more">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>