jquery插件 手风琴

原创 2012年03月28日 21:41:27

<html>
<head>
<title>手风琴效果</title>
<script type="text/javascript" language="javascript" src="./js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="./js/jquery-ui.js"></script>
<link rel="stylesheet" href="./css/jquery-ui.css" />

<script language="javascript" type="text/javascript">

$(function(){
 
 $("#accordion").accordion({
  header:"h2",
     event:"mouseover", 
  
   autoHeight:true,
     fillSpace:true,
  
  
  })
 
 
 
 
 
 
 });

 


</script>

 


</head>
<body>
<div id="accordion" style="width:600px; height:500px; border:#00C solid 5px;">

<div>
<h2><a href="#">一</a></h2>
<div>你信不信我是手风琴</div>
</div>

<div>
<h2><a href="#">二</a></h2>
<div>你信不信我是钢琴</div>
</div>


<div>
<h2><a href="#">三</a></h2>
<div>你信不信我是蘑菇</div>
</div>

<div>
<h2><a href="#">四</a></h2>
<div>你信不信我是超人</div>
</div>

<div>
<h2><a href="#">五</a></h2>
<div>你信不信我是汽油</div>
</div>

<div>
<h2><a href="#">六</a></h2>
<div>你信不信我是大葱</div>
</div>

<div>
<h2><a href="#">七</a></h2>
<div>你信不信我不是人</div>
</div>

 

 

</div>

 

 


</body>

 

</html>

【JQuery】jQuery自制简易手风琴效果(附实现原理)

简易手风琴效果,附实现原理
  • LZGS_4
  • LZGS_4
  • 2015年08月30日 09:48
  • 7489

垂直手风琴5级菜单!用js+jquery动态加载菜单,附上源码hezhu和注释

1.需要一个左侧菜单,延伸到5级,并且有tab页,折叠收缩菜单。 2.附上jsp代码 ...
  • dmlcq
  • dmlcq
  • 2016年12月15日 16:14
  • 1635

vuejs组件开发之手风琴菜单组件实例

小图标是引入font-awesome字体图标库绘制的。效果如下图所示: index ...
  • CodingNoob
  • CodingNoob
  • 2017年05月16日 00:04
  • 2212

jquery插件集-手风琴菜单 各种效果

  • 2010年08月27日 15:24
  • 261KB
  • 下载

jquery插件之手风琴

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作     jquery  ui使用前提:             第一步:引入类库文件                     包...
  • wjc19911118
  • wjc19911118
  • 2012年03月28日 21:14
  • 1810

jquery插件实现手风琴效果!

>  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="...
  • SANGLIU
  • SANGLIU
  • 2013年03月14日 20:16
  • 845

jquery插件--实现手风琴效果

无标题文档 //手风琴效果 $(function(){ //var option= { header:"h3",}; $("#accor...
  • zhaoxinglei0309
  • zhaoxinglei0309
  • 2012年03月28日 17:35
  • 285

jquery插件手风琴效果

手风琴的效果 body{ font:62.5% "Trebuchet MS", sans-serif; margin: 50px;} //使用jquery加载事...
  • php398893944
  • php398893944
  • 2012年03月28日 21:10
  • 296

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

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

用jquery插件实现手风琴效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...
  • youngerhao
  • youngerhao
  • 2012年03月28日 18:48
  • 756
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件 手风琴
举报原因:
原因补充:

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