html+css+jquery实现折叠板(模仿搜索风云榜折叠板)

我有一个小毛驴

于 2013-12-27 20:28:03 发布

阅读量2.9k

点赞数

分类专栏： html+css jquery 文章标签： html jquery 折叠板搜索风云榜折叠板

本文链接：https://blog.csdn.net/liumingm_music/article/details/17618475

版权

1、关键技术：html 实现布局；css 控制样式；jquery 实现功能；2、重点技术：jquery 鼠标触摸到当前的显示当前节点下一个节点的内容，隐藏别的节点其余的下一个节点内容3、关键代码： $(function(){ $("#main h3").each(function(index){//循环遍历每一个h3节点 $(this).mousemove(functi

摘要由CSDN通过智能技术生成

1、关键技术：html 实现布局；css 控制样式；jquery 实现功能；

2、重点技术：jquery 鼠标触摸到当前的<h3> 显示当前节点下一个节点的内容，隐藏别的节点<h3>其余的下一个节点内容

3、关键代码：

<script type="text/javascript">
	$(function(){
		$("#main h3").each(function(index){//循环遍历每一个h3节点
			$(this).mousemove(function(){//注册当前节点的事件
				$(this).css("background-color","#FCFCFD");//添加当前节点的样式
				$(this).siblings("h3").css("background-color","#fff");//改变当前节点的兄弟H3节点的样式
				$(this).next().slideToggle(0,function(){//关键    注册当前节点的下一个节点的滑动事件
					$("#main div:eq("+index+")").slideDown(0).siblings("div").slideUp(0);
					$(this).css("background-color","#FCFCFD");
					$(this).siblings("div").css("background-color","#fff");					
				});
			});
		});
	})
</script>

4、完整的代码(可运行)

<!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 type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2-vsdoc.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript"

最低0.47元/天解锁文章

我有一个小毛驴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html+css+jquery实现折叠板(模仿搜索风云榜折叠板)

1、关键技术：html 实现布局；css 控制样式；jquery 实现功能；2、重点技术：jquery 鼠标触摸到当前的显示当前节点下一个节点的内容，隐藏别的节点其余的下一个节点内容3、关键代码： $(function(){ $("#main h3").each(function(index){//循环遍历每一个h3节点 $(this).mousemove(functi
复制链接

扫一扫

专栏目录