JQUERY 控制内容的全部和部分显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto;text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left;width:200px; line-height:20px;}
.showmore { clear:both;text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto;line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px;background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<script src="jquery.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
var $hiddenitems = $("ul li:gt(5):not(:last)");//定义索引值大于5且不包含最后一个li的对象为hiddenitems；
$hiddenitems.hide(); //$hiddenitems的对象隐藏
var $showsubmit = $("div.showmore>a"); //设置div中按钮的a为$showsubmit
$showsubmit.click(function(){ //为$showsubmit定义点击事件方法
if($hiddenitems.is(":visible")){ //判断条件为设置默认隐藏的元素显示
$hiddenitems.hide();
$(".showmore a span") //设置点击按钮为对象
.css("background","url(img/down.gif) no-repeat 0 0") //给选定对象添加CSS样式
.text("显示全部品牌");//给选定对象内的文字进行修改
$('ul li').removeClass("promoted"); //移除样式
}
else{
$hiddenitems.show();
$(".showmore a span")
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌");
$('ulli').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") //筛选含有佳能等文字内容的li
.addClass("promoted");
}
return false;
})
})
</script>
</head>
<body>
<divclass="SubCategoryBox">
<ul>
<li><ahref="#">佳能</a></li>
<li><ahref="#">索尼</a></li>
<li><ahref="#">三星</a></li>
<li><ahref="#">尼康</a></li>
<li><ahref="#">松下</a></li>
<li><ahref="#">卡西欧</a></li>
<li><ahref="#">富士</a></li>
<li><ahref="#">柯达</a></li>
<li><ahref="#">宾得</a></li>
<li><ahref="#">理光</a></li>
<li><ahref="#">奥林巴斯</a></li>
<li><ahref="#">明基</a></li>
<li><ahref="#">爱国者</a></li>
<li><ahref="#">其他品牌相机</a></li>
</ul>
<div class="showmore">
<a href="">
<span>显示所有品牌</span>
</a>
</div>
</div>
</body>
</html>
*所有确认DOM的括号内的内容都需要用引号括起来
JQ的赋值引用也是左右平等的，也就是$("xxx") =$("yyy")，因为是初学，右边多次少写了“$”