精简菜单和完整菜单之间进行切换

最新推荐文章于 2021-03-26 16:42:23 发布

丁棒儿

最新推荐文章于 2021-03-26 16:42:23 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qsyzb/article/details/28854029

版权

初始显示精简菜单：

点击显示全部品牌之后，将隐藏的品牌显示，并高亮显示推荐的品牌，并且此时按钮的文字变为“显示精简品牌”

show you code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.category
{
	clear:both;
	float:left;
}
.category ul li
{
	width:300px;
	height:50px;
	float:left;
	list-style:none;
}
.showmore a span
{
	margin-left:40%;
	display:inline-block;
	margin-top:50px;
	background-color:#1ABC9C;
	padding-top:20px;
	padding-left:100px;
	width:200px;
	height:50px;
	border:1px black solid;
}
.highlight
{
	color:red;
}
</style>
</head>

<body>
<div class="category">
<ul>
<li>索尼</li>
<li>爱立信</li>
<li>华为</li>
<li>苹果</li>
<li>三星</li>
<li>中兴</li>
<li>联想</li>
<li>富士</li>
<li>可达</li>
<li>雅马哈</li>
<li>其他品牌</li>
</ul>
</div>
<br/>
<div class="showmore">
<a href=""><span>显示全部品牌</span></a>
</div>
<script type="text/javascript">
	var $category  = $(".category ul li:gt(6):not(:last)");
	$category.hide();
	var $togglebtn = $(".showmore a");
	$togglebtn.click(function(){
		if($category.is(":visible")){
			 $category.hide();
			 $togglebtn.html("<span>显示全部品牌</span>");
			 $("ul li").removeClass("highlight");
		}else{
			 $category.show();
			 $togglebtn.html("<span>显示精简品牌</span>");
			 $("ul li").filter(":contains('苹果'),:contains('华为'),:contains('三星')").addClass("highlight");
		}
		return false;
	});
</script>
</body>
</html>

我们首先通过下面的语句获得需要动态显示和隐藏的元素;

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

并在初始状态下将其隐藏

       $category.hide();

然后获取超级链接元素：

	var $togglebtn = $(".showmore a");

然后对超链接元素添加click事件，在click触发的函数值中先判断$category部分是否显示

如果显示，则隐藏之，并去掉高亮显示的品牌，修改超链接内容

如果隐藏，则显示之，并为推荐品牌添加高亮属性，修改超链接内容。

因为click触发的事件中的if和else是交替执行的，所以我们可以使用toggle(event)函数进行优化，但是要说明的是：toggle(event)方法在jquery1.9之后的版本就被废弃了，原因不明~

丁棒儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
精简菜单和完整菜单之间进行切换

初始显示精简菜单：点击显示全部品牌之后，将隐藏的品牌显示，并高亮显示推荐的品牌，并且此时按钮的文字变为“显示精简品牌”show you code:jquery test.category{ clear:both; float:left;}.category ul li{ width:300px; height:50px; float:le
复制链接

扫一扫