当鼠标在元素上悬停或移出时，可以通过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. Servlet---RequestDispatcher.include方法

    为了实现代码重用,需要将某些代码和数据放在一个或多个Servlet中,以供其他Servlet使用,提供了RequestDispatcher.include方法,首先通过getServletContex ...

  2. C#使用quartz.net定时问题

    因工作需要需要完成定时查询数据..因此在了解之后完成了一个demo 所需要的dll在该地址下载 http://pan.baidu.com/s/1sjNQLXV 首先引入quartz这个dll... 在 ...

  3. Spring JdbcTemplate方法详解

    JdbcTemplate主要提供以下五类方法: execute方法:可以用于执行任何SQL语句,一般用于执行DDL语句: update方法及batchUpdate方法:update方法用于执行新增.修 ...

  4. 酷炫ILOVEU

    assume cs:code code segment main: ;显示背景22*80 ;dh中放行号 ;dl中放列号 bibi: push cx ;显示光标 ;第0页 int 10h ;在光标处显 ...

  5. 王爽<汇编语言>实验十一 (附测试代码)

    ;名称: letterc ;功能: 将以0为结尾的字符串中的小写字母转变成大写字母 ;参数: ds:si指向字符串首地址 assume cs:code data segment db data end ...

  6. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  7. python logging模块

    1.logging模块提供了四个组件logger:日志类,有两个功能1)配置日志的等级,处理器handler,过滤器filterlogger.setLevel(logging.INFO)logger. ...

  8. clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

    一.定义和用法 1.event.clientX:事件对象的水平偏移量: event.clientY:事件对象的垂直偏移量: 2.event.pageX:事件对象加上滚动距离后的水平偏移量: event ...

  9. select 触发事件

    需求:现在需要获取用户选择的选项,同时获取里面自定义的字段. 因为option没法设置事件 <select class="form-control js-example-basic-s ...

  10. 浏览器下载/导出文件 及jQuery表单提交

    1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...