用jquery实现手风琴效果

原创 2012年03月28日 21:31:14

<!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>
< script src="js/jquery-1.7.1.min.js"></script>
< script src="js/jquery-ui-1.8.18.custom.min.js"></script>
< link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />

<script>
$(function(){
 
  $("#accordion").accordion({
    header:"h3",  //头信息
    event:"mouseover", //面板展开的事件效果
    active:1, //默认展开的面板 从0开始 默认是0
    animated:"bounceslide", //面板展开的动画效果
    autoHeight:true,   //面板高度是否自动增加 
    icons:{
     //设置图标 header默认时的图标 headerSelected 激活时的效果
     header:"ui-icon-carat-2-e-w",
     headerSelected:"ui-icon-carat-2-n-s"
     }
   
  
  
   }).sortable({
       axis:"y",//只能在y轴上拖拽排序  X轴  x,y默认X,Y
    handle:"h3",//只能拖拽 h3

    });

  });

</script>
< /head>
< body>
< div id="accordion" style="width:600px;height600px; border:#F00 solid 1px;">

    <div>
    <h3><a href="#">猪八戒</a></h3>
    <div>猪八戒是唐僧的二徒弟.</div>
    </div>
   
   
    <div>
    <h3><a href="#">孙悟空</a></h3>
    <div>孙悟空是唐僧的大徒弟.</div>
    </div>
   
    <div>
    <h3><a href="#">沙僧</a></h3>
    <div>沙僧是唐僧的三徒弟</div>
    </div>


< /div>


< /body>
< /html>

 

jquery实现手风琴效果

简单的手风琴效果实现实际比看起来简单,只是改变当前的元素宽度和其他元素的宽度,其代码如下(图片什么的都要换成自己噢)         Title             *{m...
  • sunflower_li
  • sunflower_li
  • 2017年03月16日 15:10
  • 784

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

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

jQuery自制手风琴效果增强版(附实现原理)

手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101...
  • alokka
  • alokka
  • 2017年06月15日 22:52
  • 782

一起来写一个简易的手风琴效果

基于JQ的手风琴效果。
  • AmberWu
  • AmberWu
  • 2017年05月22日 10:10
  • 403

纯CSS实现手风琴效果

今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。...
  • whqet
  • whqet
  • 2014年02月23日 10:32
  • 7843

jQuery实现手风琴效果【详细注解】

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...
  • zwt90
  • zwt90
  • 2012年03月28日 21:00
  • 325

三行jquery实现手风琴效果

手风琴特效的实现 实现手风琴特效,先讲一下大致的思路.1.用一个大的div 包裹住一个ul ,ul ,里面再接四个小的li, html代码结构大致如下,设置背景色是为了看出效果,最后一个是默认展...
  • qq_29594393
  • qq_29594393
  • 2016年10月07日 11:35
  • 385

jQuery实现手风琴效果

jQuery实现手风琴效果 *{ margin: 0; padding: 0; } ul{ list-style: none; } .parent{ width: 200px; text-...
  • XLjiqimaobuchiyu
  • XLjiqimaobuchiyu
  • 2017年09月12日 22:54
  • 80

使用jQuery实现手风琴效果

手风琴效果 /*UI的使用要引入别人的类库文件 js类库 css样式 */ $(function(){ //var option={header:"h3"}; $("#acco...
  • bing7599069
  • bing7599069
  • 2012年03月28日 16:52
  • 310

原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果

最近学了css3的变形、过渡和动画,写了一个用css3手风琴菜单的效果,又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的,现在给大家分享一下。 1、css3实现手风琴效果 ...
  • lgdshr123
  • lgdshr123
  • 2016年11月01日 17:23
  • 2405
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用jquery实现手风琴效果
举报原因:
原因补充:

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