jquery 学习笔记二 隐藏与显示
css找到元素后是添加样式，而jquery找到元素后是添加形为。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<style type="text/css">
.subtn{}
ul{ list-style:none; width:500px; margin:auto}
ul li{ float:left; margin:0 20px 0 20px; width:120px; text-align:center;}
.clear{ clear:both}
.morebtn{ width:500px; text-align:center; height:50px; line-height:50px; margin:auto}
.promoted{ color:blue;}
</style>
<script type="text/javascript">
$(function(){
var $subtn=$('ul li:gt(5):not(:last)');
$subtn.hide();
var $morebtn=$('.morebtn a');
$morebtn.click(function(){
if($subtn.is(":visible")){
$('.morebtn a span').css('color','red').text('显示全部品牌');
$('ul li').removeClass("promoted");
$subtn.hide();
}
else{
$('.morebtn a span').css('color','red').text('精简显示品牌');
$('ul li').filter(":contains('佳能3'),:contains('佳能4'),:contains('佳能6'),:contains('佳能8')").addClass("promoted");
$subtn.show();
}
return false;
});
});
</script>
<body>
<div class="subtn">
<ul>
<li><a href="#">佳能1</a><i>300301</i></li>
<li><a href="#">佳能2</a><i>300302</i></li>
<li><a href="#">佳能3</a><i>300303</i></li>
<li><a href="#">佳能4</a><i>300304</i></li>
<li><a href="#">佳能5</a><i>300305</i></li>
<li><a href="#">佳能6</a><i>300306</i></li>
<li><a href="#">佳能7</a><i>300307</i></li>
<li><a href="#">佳能8</a><i>300308</i></li>
<li><a href="#">佳能9</a><i>300309</i></li>
<li><a href="#">佳能10</a><i>3003010</i></li>
<li><a href="#">佳能11</a><i>3003011</i></li>
<li><a href="#">佳能12</a><i>3003012</i></li>
<li><a href="#">佳能13</a><i>3003013</i></li>
<li><a href="#">佳能14</a><i>3003014</i></li>
<li><a href="#">佳能15</a><i>3003015</i></li>
<li><a href="#">佳能16</a><i>3003016</i></li>
</ul>
</div>
<div class="clear"></div>
<div class="morebtn">
<a href="#"><span>显示全部品牌</span></a>
</div>
</body>
</html>
本文来自博客园，作者：cmwang2017，转载请注明原文链接：https://www.cnblogs.com/bm20131123/p/4593129.html
