<html>
<head>
<style>
.vimport{
background:#158963;
}
</style>
</head>
<body>
<div class="subCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(3040)</i></li>
<li><a href="#">尼康</a><i>(3040)</i></li>
<li><a href="#">索尼</a><i>(3040)</i></li>
<li><a href="#">三星</a><i>(3040)</i></li>
<li><a href="#">联想</a><i>(3040)</i></li>
<li><a href="#">松下</a><i>(3040)</i></li>
<li><a href="#">希捷</a><i>(3040)</i></li>
<li><a href="#">惠普</a><i>(3040)</i></li>
<li><a href="#">华硕</a><i>(3040)</i></li>
<li><a href="#">其他品牌</a><i>(3040)</i></li>
</ul>
</div>
<div class="showMore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
<script type="text/javascript" src="jquery.min.js">
</script>
<script>
$(function(){
var $categoryMore=$(".subCategoryBox ul li:gt(4):not(:last)");
$categoryMore.hide();
var $showBnt=$("div.showMore>a");
var $btnText=$(this).find('span').text();
$showBnt.toggle(function(){
$categoryMore.hide();
$(this).find('span').css("background","yellow").text("显示全部品牌");
$("ul li").removeClass("vimport");
return false;
},function(){
$categoryMore.show();
$(this).find('span').css("background","red").text("精简显示品牌");
$("ul li").filter(":contains('佳能'),:contains('联想'),:contains('华硕')").addClass("vimport");
return false;
})
})
</script>
</body>
</html>
jQuery实现菜单的收缩效果
最新推荐文章于 2021-05-30 19:52:00 发布