使用jQuery实现模拟手风琴效果

最新推荐文章于 2022-11-28 10:26:52 发布

HUMHSX

最新推荐文章于 2022-11-28 10:26:52 发布

阅读量1.1k

点赞数

文章标签： jquery javascript stylesheet header function xhtml

本文链接：https://blog.youkuaiyun.com/HUMHSX/article/details/7404219

版权

<!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>
<!-- 先加载要使用的js类库，加载的时候跟顺序有关系 -->
<script language="javascript" type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<!-- 加载css类库 -->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script  language="javascript"  type="text/javascript">
$(function (){
	$("#accordion").accordion({
		  header:"h3",//设置它的开头内容
		  event:"mouseover",//设置面板展开的事件效果，默认为click
		  active:0,   //设置面板默认展开的 索引值从0开始
		  animated:"bounceslide",  //面板展开的动画效果
		  autoHeight:false,  //面板的宽度是否随着内容的增多自动增高
		  fillSpace:false,     //填充父元素
		  icons:{ //图标设置    header 默认时的效果   
			   header:".ui-icon-carat-2-e-w",   //默认图标
			   headerSelected:"ui-icon-carat-2-n-s"  //选中之后的图标改变
			     }
		  
		  }).sortable({ //拖拽效果
			  axi:"x",  //实现拖拽效果   默认的是在y轴上进行拖拽
			  handle:"h3", //实现只能拖拽h3
			  stop:function (event,ui){ //stop 事件  匿名函数   event  浏览器自带的事件处理对象 ui操作控件
				 // alert("这是真的嘿嘿");
				 ui.item.children("h3").triggerHandler("focusout")   
				    }
				  });
		//通过绑定的操作实现  事件处理		  
      $("#accordion").bind("sortstop",function (event,ui){
		  alert("这是什么东西啊"); 
		   })
	 
	 
	  })


</script>
</head>

<body>
<h1>模拟手风琴效果</h1>
<div id="accordion" style="width:600px; height:600px; 
  border:#CF3 1px solid;">
			<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>