当鼠标在元素上悬停或移出时，可以通过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. jquery+ajax跨域请求webservice

    最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...

  2. 今天我看了一个H5游戏EUI的例子，我都快分不清我到底是在用什么语言编译了代码了，作为刚刚学习H5游戏开发的菜鸟只能默默的收集知识

    今天看了一个EUI的demo,也是接触H5游戏开发的第五天了,我想看看我能不能做点什么出来,哎,自己写果然还是有问题的.在看EUI哪一个demo的时候就遇见了一些摇摆不定的问题,我觉得提出来 1.to ...

  3. Android之ScrollView嵌套ListView和GridView冲突

    由于ListView,GridView本身都继承于ScrollView,一旦在ScrollView中嵌套ScrollView, 在ScrollView中嵌套使用ListView或者GridView,L ...

  4. Roslyn 学习笔记（一）

    本文记录了Roslyn开发环境的安装与编译过程,参考了以下Roslyn项目的官方文档 https://github.com/dotnet/roslyn/blob/master/docs/contrib ...

  5. [NOIP2014]寻找道路（图论）

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足条 ...

  6. string.join(iterable)

    str.join(iterable) Return a string which is concatenation the  of the strings in the iterable iterab ...

  7. 在生产环境记录http请求参数

    StringBuilder strParam = new StringBuilder(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + ...

  8. Struts2中通过超链接传参数要注意的问题

    写到分页的功能,在传递页码pageNo的时候遇到了参数接收不正确的问题,我本来在action中是定义了一个pageNo字符串参数和一个Page类参数,Page是一个封装了页面要显示的数据集合和页面信息 ...

  9. [原]php远程odbc连接sqlsvr数据库，自定义端口，命名实例的连接方式

    远程odbc连接sqlsvr数据库,自定义端口,命名实例的连接方式,默认如果不修改的话sqlsvr的端口号是1433,默认实例名就是机器名,,如果既用了命名实例,又改了默认端口,改怎么连接数据库呢? ...

  10. 支付宝接入文档中TRADE_SUCCESS和TRADE_FINISHED的本质区别

    之前一直不知道这2种状态到底有什么不同.支付宝中担保交易和即时到账交易对其的描述为: TRADE_SUCCESS  交易成功(或支付成功) TRADE_FINISHED    交易完成 一头雾水... ...