$(document).ready(function(){
$('.box h1:first').addClass('active');
$('.box p:not(:first)').hide();
$('.box h1').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
$('.box h1').click(function(){
$(this).next('p').slideToggle()
.siblings('p').slideUp();
$(this).toggleClass('active')
.siblings('h1').removeClass('active');
});
});
css、dom:
<style type="text/css">
* { padding:0; margin:0; }
body { padding:100px; font:12px "宋体"; }
.box { width:500px; border-bottom:1px solid #CCC; }
.box h1 {
height:30px;
line-height:30px;
padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#eee url(img/bg.gif) no-repeat right -27px; }
.box h1.hover { background-color:#e3e2e2; }
.box h1.active { background-position:right 7px; }
.box p { padding:10px; border-left:1px solid #ccc; border-right:1px solid #ccc; }
</style>
</head>
<body>
<div class="box">
<h1>标题一</h1>
<p>内容</p>
<h1>标题二</h1>
<p>内容</p>
<h1>标题三</h1>
<p>内容</p>
<h1>标题四</h1>
<p>内容</p>
<h1>标题五</h1>
<p>内容</p>
</div>
</body>
</html>
===================
2.控制数据列表
js:
$(document).ready(function(){
var hdw = $('.content ul li:gt(5):not(:last)');
hdw.hide();
$('.boxmore a').click(function(){
if (hdw.is(':visible')){
hdw.hide();
$('.boxmore a span').css('background','url(img/down.gif) no-repeat right 0')
.text('显示全部资源');
$('ul li').removeClass('onebox');
}else{
hdw.show();
$('.boxmore a span').css('background','url(img/up.gif) no-repeat right 0')
.text('精简资源');
$('ul li').filter(":contains('网页布局'),:contains('PHP视频教程'),:contains('建站知识'),:contains('高清图片下载')")
.addClass('onebox');
};
return false;
});
});
css dom:
* { padding:0; margin:0; }
body { font-size:12px; }
ul { list-style-type:none; }
a { text-decoration:none; color:#666; font-family:"宋体"; outline:none; }
a:hover { text-decoration:underline; color:red; }
.content { width:600px; margin:40px auto 0 auto; border:1px solid #ccc; text-align:center; }
.container { border:5px solid #eee; padding:10px; }
.content ul { padding-left:10px; }
.content ul li { float:left; width:170px; margin-right:15px; line-height:20px; }
.boxmore { clear:both; padding-top:10px; }
.boxmore a { display:block; width:120px; line-height:24px; border:1px solid #aaa; margin:0 auto; }
.boxmore a span { padding-right:15px; background:url(img/down.gif) no-repeat right 0; }
.onebox a { color:red; font-weight:bold; }
-----------dom:
<div class="content">
<div class="container">
<ul>
<li ><a href="#">XHTML网页基础教程</a><span>(30440) </span></li>
<li ><a href="#">DEDE织梦CMS教程</a><span>(27220) </span></li>
<li ><a href="#">网页布局</a><span>(20808) </span></li>
<li ><a href="#">Mysql数据库视频教程</a><span>(17821) </span></li>
<li ><a href="#">DreamWeaverCS5</a><span>(12289) </span></li>
<li ><a href="#">PhotoShop视频教程</a><span>(8242) </span></li>
<li ><a href="#">PHP视频教程</a><span>(14894) </span></li>
<li ><a href="#">After Effects视频教程</a><span>(9520) </span></li>
<li ><a href="#">建站知识</a><span>(2195) </span></li>
<li ><a href="#">DIV+CSS</a><span>(4114) </span></li>
<li ><a href="#">高清图片下载</a><span>(12205) </span></li>
<li ><a href="#">网页模版下载</a><span>(1466) </span></li>
<li ><a href="#">图标资源下载</a><span>(3091) </span></li>
<li ><a href="#">其它资源</a><span>(7275) </span></li>
</ul>
<div class="boxmore"> <a href="1.html"><span>显示全部资源</span></a> </div>
</div>
</div>