后台菜单

最新推荐文章于 2024-04-27 11:31:56 发布

qq_32444825

最新推荐文章于 2024-04-27 11:31:56 发布

阅读量667

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/qq_32444825/article/details/77692045

版权

jq 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

$(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：

===================

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>

qq_32444825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后台菜单

$(document).ready(function(){$('.box h1:first').addClass('active');$('.box p:not(:first)').hide();$('.box h1').hover(function(){$(this).addClass('hover');},function(){$(this)
复制链接

扫一扫