jQuery-ui中的手风琴效果

手风琴效果实现思路

在body中书写下面的div，content的内容可以根据需要复制任意个

<div id="accordion">

            <div id=content>
                <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>

引用js和css

<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>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />

核心script语句

$(function (){
    
    $("#accordion").accordion({
    
        header: "h3",//这里的字号可以任意改变，根据div中的改变
        animated: "bounceslide" ,//动画
        event: "mouseover",//鼠标放上去，选中，默认值是clike
        change: function(event, ui){
            
            }
        });