jQuery实现菜单的精显　全显

yys3155

于 2013-04-01 18:59:59 发布

阅读量518

点赞数

本文链接：https://blog.csdn.net/yys3155/article/details/8747953

版权

<html>
<meta charset="utf-8">
<head>
<style>
*{margin:0;padding:0;}
body{font-size:15px;text-align:center}
.showlist{margin:auto;width:600px}
.showlist ul li{display:block;float:left;width:200px;line-height:30px}
.showmore{clear:both;padding-top:15px}
a{text-decoration:none}
a:hover{color:green;text-decoration:underline}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
var $con=$(".showlist ul li:gt(2)");
$con.hide();
$(".showmore a span").toggle(function(){
$con.show();
$(".showmore a span").text("精简显示");
return false;
},function(){
$con.hide();
$(".showmore a span").text("显示全部");
return false;
})
})
</script>
</head>

<body>
<div class="showlist">
<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>
</ul>
<div class="showmore"><a href="#"><span>显示全部</span></a></div>
</div>
</body>
</html>