精簡選單和完整選單之間進行切換

weixin_34391854發表於2017-04-24

初始顯示精簡選單：


點選顯示所有品牌之後，將隱藏的品牌顯示，並高亮顯示推薦的品牌，而且此時button的文字變為“顯示精簡品牌”


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之後的版本號就被廢棄了，原因不明~


相關文章