jquery插件anccordion

时间:2023-03-08 21:25:23
 (function(){
$.fn.YAccordion=function(options){ var settings={
trigger:'click',
speed:300,
}; if(options)
$.extend(settings,options); return this.each(function(){
$("p",this).bind(settings.trigger,function(){
$(this).next("ul").slideToggle(settings.speed).siblings("ul").hide();
});
$("ul",this).hide().first().show();
});
}
})();
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN"/>
<script type="text/javascript">
</script>
<style type="text/css">
p{cursor:pointer;}
</style>
</head>
<body>
<div class="accordion">
<p>第一栏</p>
<ul>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
</ul>
<p>第二栏</p>
<ul>
<li>bbbbbbbbb</li>
<li>bbbbbbbbb</li>
<li>bbbbbbbbb</li>
</ul>
<p>第三栏</p>
<ul>
<li>ccccccccc</li>
<li>ccccccccc</li>
<li>ccccccccc</li>
</ul>
</div>
<script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery.yaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
$(".accordion").YAccordion({speed:100});
</script>
</body>
</html>