您的位置：首页 > Web前端 > JQuery

利用jQuery实现->精简显示品牌列表

2013-04-01 19:21 435 查看
<html>

<head>

<meta charset="utf-8"/>

<style>

*{margin:0; padding:0;}

body{font-size:15px; text-align:center}

.showLess{margin:auto; width:600px;}

.showLess ul li{display:block; float:left; width:200px; line-height:30px;}

.showMore{clear:both; padding-top:15px;}

a{text-decoration:none}

a:hover{color:#0FF; text-decoration:underline}

</style>

<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

/*

1,默认情况下显示前三个，需要将三个以后的隐藏

2，点击显示全部品牌的时候，显示全部的，同时“显示全部品牌” 切换成 “精简显示品牌”

3，点击“精简显示品牌” 要将第三个之后隐藏起来，同时"精简显示品牌" 切换成 "显示全部品牌"

*/

$(function(){

//1,

var $category = $(".showLess ul li:gt(2):not(last)");

$category.hide();

$(".showMore a span").toggle(function(){

$category.show();

$(".showMore a span").text("精简显示品牌");

return false;

},function(){

$category.hide();

$(".showMore a span").text("显示全部品牌");

return false;

});



});

</script>

</head>

<body>

<div class="showLess">

<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>

</ul>

<div class="showMore"><a href="#"><span>显示全部品牌</span></a></div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航