jquery点击显示更多列表文字js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery点击显示更多列表文字js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击显示更多列表文字</title>
<script type="text/javascript" src="js/jQuery1.7.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
#brandList{width:300px;font-size:12px;border:1px solid #999;margin:20px auto;}
#brandList a{text-decoration:none;}
#brandList ul li{width:100px;float:left;list-style-type:none;line-height:30px;line-height:30px;text-align:center;}
#brandList #showMore{clear:both;padding:15px;width:150px;margin:0 auto;}
#brandList #showMore span{display:block;height:30px;line-height:30px;border:1px solid #999;text-align:center;font-family:Verdana, Geneva, sans-serif;}
#brandList #showMore .hide{background:url(images/plus.png) no-repeat 10% 50%;}
.show{background:url(images/minus.png) no-repeat 10% 50%;}
</style>
</head>
<body>
<div id="brandList">
	<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 id="showMore">
    	<a href="#">
        	<span class="hide">显示更多品牌</span>
        </a>
    </div>
</div>
</body>
</html>

JS代码(demo.js):

/*$(document).ready(function(){
	var $category = $('ul li:gt(5):not(:last)');
	$category.hide();
	var $toggleBtn = $('#showMore a');
	$toggleBtn.click(function(){
	if($category.is(":hidden")){
	$category.show();
	$(this).find('span').removeClass('hide').addClass('show').text('精简显示品牌');
	$('ul li a').filter(":contains('佳能')").css("color","red");
}
else{
	$category.hide();
	$(this).find('span').removeClass('show').addClass('hide').text('显示全部品牌');
}
}
);
}
);
	*/
$(document).ready(function(){
	var $category = $('ul li:gt(5):not(:last)');
	$category.hide();
	var $toggleBtn = $('#showMore a');
	$toggleBtn.toggle(function(){
	$category.show();
	$(this).find('span').removeClass('hide').addClass('show').text('精简显示品牌');
}
,function(){
	$category.hide();
	$(this).find('span').removeClass('show').addClass('hide').text('显示全部品牌');
}
);
}
);

附件:下载该文件资源,减少时间成本(增值服务)