当鼠标在元素上悬停或移出时，可以通过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回收机制

    为什么要有回收机制?why? 打个比方,我有一个内存卡,这个内存是8G的,我把文件,视频,音乐,都保存到了这个内存卡,随着我的储存的内容越来越多,这个内存卡已经保存不了了,如果我还想再把其他的文件保存 ...

  2. 基于注解的SpringMVC简单介绍

    SpringMVC是一个基于DispatcherServlet的MVC框架,每一个请求最先访问的都是DispatcherServlet,DispatcherServlet负责转发每一个Request请 ...

  3. led驱动

    驱动步骤: 1.驱动框架:一般读驱动代码需要module_init一层层找代码 2.硬件配置 代码中led_ioctl函数设置引脚的电平高低,该函数是驱动程序对设备的通道进行统一设置/控制的函数 一. ...

  4. 使用RXTX获取电脑串口

    RXTX是javacomm串口通信的一个扩展 RXTX开发所需文件的下载地址:http://rxtx.qbang.org/wiki/index.php/Download 解压之后可以看到支持各个平台的 ...

  5. Kali2.0VMwareTools安装

    安装完系统后,配置好apt源,然后执行下列语句可成功安装VMwareTools工具,可实现本机与虚拟机之间的文件复制等功能: apt-get install open-vm-tools-desktop ...

  6. HTML5画布实现方法：

    我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...

  7. Web前端MVC框架

    MVC: 模型层(model).视图层(view).控制层(controller) Model:即数据模型,用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理,模型可以直接访问数据. View: ...

  8. HTMLParser使用

    htmlparser[1] 是一个纯的java写的html(标准通用标记语言下的一个应用)解析的库,它不依赖于其它的java库文件,主要用于改造或提取html.它能超高速解析html,而且不会出错.现 ...

  9. Mysql快速删除表中重复的数据

    表结构 CREATE TABLE T_VENDOR ( ID ) NOT NULL AUTO_INCREMENT COMMENT 'ID', COUNTRY ) DEFAULT NULL COMMEN ...

  10. 分享一个绿色版本 sql server 查询器，

    首先感谢原作者 源码来原于网络 此查询器增加了一些功能, 可以高亮显示 导出sql 语句    可以把左边树型拖入脚本编辑器 http://pan.baidu.com/s/1dDjaSbn