关闭

juqery实现手风琴效果

543人阅读 评论(0) 收藏 举报
用jquery实现手风琴效果
/*引入jquery类库文件*/
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
/*引入css样式*/
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.18.custom.css" 

/>
/*jquery部分*/
<script>
$(function(){
   $('#accordion').accordion({
       header:'h3',           //头文件 h3必须是h3 页面是哪个就是哪个
       event:'movseover',     //面板展开的事件效果,默认是click效果
       animated:'bounceslide',//动画效果 面板展开的动画效果
       
     //图标的设置 header默认时的效果   headerSelected面板激活时的图标
      icons:{
            header:'ui-icon-carat-2-e-w',
            headerSelected:'ui-icon-carat-2-n-s',
            },
      }).sortable({
             axis:'y',    //只能在y轴上拖拽排序 默认为x,y轴
             handle:'h3'   //采用只能拖拽h3
             });

});

</script>

/*html部分*/
<div id='accordion' style='width:600px;height:600px;border:#C09 1px solid;'>
<div>
<h3><a href='#'>first</a></h3>
<div>aaaaaaaaaaaaaa</div>
</div>
<div>
<h3><a href='#'>first2</a></h3>
<div>aaaaaaaaaaaaaa</div>
</div>
<div>
<h3><a href='#'>first3</a></h3>
<div>aaaaaaaaaaaaaa</div>
</div>
</div>
效果显示:
 

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:51976次
    • 积分:1111
    • 等级:
    • 排名:千里之外
    • 原创:60篇
    • 转载:5篇
    • 译文:0篇
    • 评论:3条