jQuery实现菜单的收缩效果

最新推荐文章于 2021-05-30 19:52:00 发布

跟着组织混饭吃

最新推荐文章于 2021-05-30 19:52:00 发布

阅读量880

点赞数

分类专栏：前端文章标签： javascript jQuery

本文链接：https://blog.csdn.net/coolwubo/article/details/38399147

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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