当鼠标在元素上悬停或移出时，可以通过JQuery的hover方法来给元素绑定两个处理方法，前者用于鼠标悬停，后者用于鼠标移出，因此根据这这特点再设置相应元素的css属性后就可以方便的实现手风琴布局，然而这样的却有个问题，即当鼠标移出时就导致内容被隐藏，示例代码如下：
<html>
<head>
<title>Demo</title>
<script language="javascript" type="text/javascript" src="jquery-2.1.3.js"></script>
<style>
.title
{
width:300px;
height:25px;
line-height:25px;
text-align:left;
vertical-align:center;
border:1px solid blue;
 
}
 
.content
{
width:300px;
height:100px;
display:none;
border:1px solid blue;
}
</style>
<script type="text/javascript">
$(function(){
$(".title").hover(function(){
$(this).next().css("display", "block");
}, function(){
$(this).next().css("display", "none");
});
})
</script>
</head>
<body>
<div class="title">
title1
</div>
<div class="content">
content1
</div>
<div class="title">
title2
</div>
<div class="content">
content2
</div>
<div class="title">
title3
</div>
<div class="content">
content3
</div>
<div class="title">
title4
</div>
<div class="content">
content4
</div>
</body>
</html>
 
鉴于使用hover实现手风琴布局的缺点，可以用另一种方式来实现更好的效果，即先定义一个select类样式，有该类样式的div的display属性为block，然后使用JQuery给发生click事件的title绑定事件处理方法，在改方法中首先移去select类，再给该titile的content添加select样式，代码如下：
<html>
<head>
<title>Demo</title>
<script language="javascript" type="text/javascript" src="jquery-2.1.3.js"></script>
<style>
.title
{
width:300px;
height:25px;
line-height:25px;
text-align:left;
vertical-align:center;
border:1px solid blue;
 
}
 
.content
{
width:300px;
height:100px;
display:none;
border:1px solid blue;
}
 
.display
{
display:block;
}
</style>
<script type="text/javascript">
$(function(){
$(".title").click(function(){
$(".content").removeClass("display");
$(this).next().addClass("display");
})
})
</script>
</head>
<body>
<div class="title">
title1
</div>
<div class="content">
content1
</div>
<div class="title">
title2
</div>
<div class="content">
content2
</div>
<div class="title">
title3
</div>
<div class="content">
content3
</div>
<div class="title">
title4
</div>
<div class="content">
content4
</div>
</body>
</html>
第二种方式完美的实现了手风琴布局，当然也可以不使用添加类样式的方式，而通过JQuery的hide和show方法来完成同样的功能。

使用JQuery实现手风琴布局的更多相关文章

  1. 分享一个jQuery动态网格布局插件：Masonry(转)

    在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...

  2. jQuery之手风琴图片

    <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. jquery多级手风琴插件–accordion.js

    手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...

  4. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  5. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  6. 一款基于jquery的手风琴显示详情

    今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div al ...

  7. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  8. jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件

    完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...

  9. Jquery DataTables 自定义布局sdom

    Jquery DataTables 自定义布局sdom JQuery Datatable sDom 配置 官网给的描述是: This initialisation variable allows yo ...

随机推荐

  1. [ JS 进阶 ] 基本类型 引用类型 简单赋值 对象引用

    ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型,拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两 ...

  2. C的文件操作

    文件文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名. 实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等 ...

  3. 通过sougou输入法，解决卡在Setup Wizard（小绿人）界面

    本人使用海信EG900手机(安卓2.3.5,已root),为了使用google的服务,先后手动复制和CWM recovery刷入google服务包(gapps-gb-20110828-signed.z ...

  4. hadoop作业缺少jar文件解决办法

    1 可以使用maven把插件带入 2 把jar放到集群的jar文件目录下,然后重启集群

  5. System.DateUtils 2. IsInLeapYear 判断是否是闰年

    编译版本:Delphi XE7 function IsInLeapYear(const AValue: TDateTime): Boolean; implementation // 判断是否是闰年 f ...

  6. 关于 一开始不懂得 hosts配置。

    是转载别人的. 原文: http://my.oschina.net/cxz001/blog/298228   感谢分享: 一开始抄着陪着win下的hosts文件.然后配置  apache中的hosts ...

  7. Android EidtText 光标的使用和设置

    使光标移动到制定的位置: editText.setSelection(editText.length()); 输入的参数是个整数   在请求出现光标是,也就是在获取焦点时: editText.requ ...

  8. VIM常用快捷键

    光标前插入i,行首插入 拷贝当前行 yy或者Y 删除一行dd,删除后进入插入模式cc或者S 粘贴p 撤销u,重做ctrl + r 删除一行dd,删除后进入插入模式cc或者S

  9. malloc原理和内存碎片[转]

    当一个进程发生缺页中断的时候,进程会陷入内核态,执行以下操作: 1.检查要访问的虚拟地址是否合法 2.查找/分配一个物理页 3.填充物理页内容(读取磁盘,或者直接置0,或者啥也不干) 4.建立映射关系 ...

  10. catalog备份数据库及RMAN存储脚本

    环境说明: 提前配置好两个库的监听与tnsnames.oraIP:10.100.25.13 为目标数据库  IP:10.100.25.14 为恢复目录数据库(catalog database) 以下操 ...