js jquery 图文并茂讲解手风琴,

原创 2012年03月28日 19:54:37

鼠标移到third上显示


鼠标移到second上显示



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script language="javascript" src="../jquery插件/jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
<script language="javascript" src="../jquery插件/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery插件/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script language="javascript">
 $(function (){
//运用jquery生成手风琴
$("#accordion").accordion({ 
header: "h3",
disabled:false,
active:2,
animated:'bounceslide',
event:'mouseover',
navigation:true,
});
})
</script>
<body>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>


</div>


<div>


<h3><a href="#">Second</a></h3>


<div>Phasellus mattis tincidunt nibh.</div>


</div>


<div>


<h3><a href="#">Third</a></h3>


<div>Nam dui erat, auctor a, dignissim quis.</div>


</div>


</div>


</body>
</html>

相关文章推荐

第30款插件:第25款插件:jquery.accordion.js 纵向手风琴效果插件

描述:这款手风琴效果适用于折叠的菜单,方便使用!用这款插件制作极其方便,只需要定义很少的参数,便可制作出纵向手风琴效果! 图片展示: 兼容浏览器: IE6+/Firefox/Google ...
  • skace
  • skace
  • 2013年01月20日 03:46
  • 459

Jquery UI插件---手风琴效果

Jquery UI插件---手风琴效果 今天我们学习了Jquery的UI插件,感觉这个确实是个很好用的制作页面的工具。做出来的页面简单大方,很漂亮。 下面,我就主要来介绍一下我们今天学习的jque...

一个手风琴效果的jquery动画

*{ padding:0px; margin:0px; } .li_...
  • Auyuer
  • Auyuer
  • 2017年07月28日 22:36
  • 86

bootstrap中jquery插件——collapse折叠效果-手风琴效果

先来掌握collapse插件的基本用法,再慢慢深入实例。 collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下:Link with href //...

jquery插件手风琴效果

手风琴的效果 body{ font:62.5% "Trebuchet MS", sans-serif; margin: 50px;} //使用jquery加载事...

精心挑选的12款优秀 jQuery 手风琴效果插件和教程

当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的...
  • Tizian
  • Tizian
  • 2012年08月23日 16:21
  • 488

jquery手风琴效果

屡见不鲜的一个jquery效果 效果图: [插入] 难度不大,代码如下: html: 导航一 ...
  • jian_xi
  • jian_xi
  • 2016年12月01日 22:36
  • 229

jQuery UI Accordion(手风琴)

源代码: "> jquery-accordion/demo/demo.css" />

jquery-ui 手风琴组件Accordion学习(可上下拖拽)

jQuery UI Accordion - Sortable /* IE has layout issues when sorting (se...

用jquery插件实现手风琴效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js jquery 图文并茂讲解手风琴,
举报原因:
原因补充:

(最多只允许输入30个字)