一個不錯的JS折疊效果

先點選這裡看下效果吧

用法:

1.添加JS庫(點選下截):

<script src="prototype.lite.js" type="text/javascript"></script>

<script src="moo.fx.js" type="text/javascript"></script>

<script src="moo.fx.pack.js" type="text/javascript"></script>

2.建立xhtml結構:

<div id="container">

    <H1 class="title"><A href="javascript:void(0)">(1)這裡放标題</H1>

    <div class="content">

        <p>(1)這裡放内容</p>

    </div>

    <H1 class="title"><A href="javascript:void(0)">(2)這裡放标題</H1>

    <div class="content">

        <p>(2)這裡放内容</p>

    </div><H1 class="title"><A href="javascript:void(0)">(3)這裡放标題</H1>

    <div class="content">

        <p>(3)這裡放内容</p>

    </div>

</div>

3.調用JS:

<script type="text/javascript">

    //定義contents 組數為所有将要顯示的内容

    var contents = document.getElementsByClassName(\'content\');

    //定義contents 組數為所有标題，也是可點選展開的按鈕

    var toggles = document.getElementsByClassName(\'title\');

    //調用moofx JS庫

    var myAccordion = new fx.Accordion(

        toggles, contents, {opacity: true, duration: 400}   //opacity确定是否有alpha透明變化,duration确定動作所有時間

    );

    myAccordion.showThisHideOpen(contents[0]);  //預設打開第一個内容

 </script>

完成.

簡單而且效果不錯吧

如果還要界面好看點，自已定義下CSS吧