当鼠标在元素上悬停或移出时，可以通过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. null和undefined区别（转）

    目前,null和undefined基本是同义的,只有一些细微的差别. null表示"没有对象",即该处不应该有值.典型用法是: (1) 作为函数的参数,表示该函数的参数不是对象. ...

  2. 一个大数据的demo

    package test.admin; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fil ...

  3. 我是如何社工TDbank获取朋友隐私的

    原创 ziwen@beebeeto 转载请保留本行 个人感觉 国外的安全方面对社工的了解和防范并不是很好 即使他们使用社工的时间比我们要长很多 比如 他们的visa在pos机上使用是不需要密码的 而且 ...

  4. 备忘DES带向量的加密和解密与DES简单加密与解密

    package com.ego.util; import java.security.Key; import java.security.SecureRandom; import java.secur ...

  5. SpringMvc 页面DATE传值问题

    页面传过来yyy-MM-dd格式的日期类型,springMVC是不认的. 解决办法: @DateTimeFormat(pattern="yyyy-MM-dd") 在类属性上加上注解 ...

  6. java二分查找举例讨论

    最近做笔试题有这么一个关于二分查找的例子. 给一个有序数组,和一个查找目标,用二分查找找出目标所在index,如果不存在,则返回-1-(其应该出现的位置),比如在0,6,9,15,18中找15,返回3 ...

  7. squid源码安装下的conf文件默认值和提示

    #    WELCOME TO SQUID 3.0.STABLE26#    ----------------------------##    This is the default Squid c ...

  8. C段旁注工具CCC.exe

    C段旁注工具CCC.exe可以进行C段的web站点批量查询 自动排除DNS错误的域名以及IP和当前服务器不符的域名 抓取bing上的所有URL,不光是域名信息,方便直接进入 自动生成html报告,方便 ...

  9. wordmate 词典安装

    wordmate,使用 StarDict 的词典,可称为 Android 上的 StarDict 安装 wordmate 后,会在 SD 卡中生成 wordmate 文件夹,词典便放在此目录 下载词典 ...

  10. J2EE学习（2）--何謂容器【良葛格学习笔记搬】

    何謂容器 對於Java程式而言,JVM(Java Virtual Machine)是其作業系統,.java編譯為.class檔案,.class對於JVM而言,就是其可執行檔,你的Java程式基本上只認 ...