JQ效果

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html >

     < head >

         < title > jQuery accordion </ title >
         < script  type ="text/javascript"  src ="jquery.js" ></ script >

         < script  type ="text/javascript" > ...

            $.accordian = function(items, first, options) ...{

                var active = first;
                var running = 0;

                var titles = options && options.titles || '.title';
                var contents = options && options.contents || '.content';
                var onClick = options && options.onClick || function()...{};
                var onShow = options && options.onShow || function()...{};
                var onHide = options && options.onHide || function()...{};
                var showSpeed = options && options.showSpeed || 'slow';
                var hideSpeed = options && options.hideSpeed || 'fast';

                $(items).not(active).children(contents).hide();
                $(items).not(active).each(onHide);
                $(active).each(onShow);

                $(items).children(titles).click(function(e)...{

                    var p = $(contents, this.parentNode);
                    $(this.parentNode).each(onClick);

                    if (running || !p.is(":hidden")) return false;
                    running = 2;

                    $(active).children(contents).not(':hidden').slideUp(hideSpeed, function()...{--running;});
                    p.slideDown(showSpeed, function()...{--running;});

                    $(active).each(onHide);
                    active = '#' + $(this.parentNode)[0].id;
                    $(active).each(onShow);

                    return false;
                });

            };

            function simpleLog(message) ...{
                $('<div>' + message + '</div>').appendTo('#log');
            }

            $(function()...{

                $.accordian('#list1 > div', '#item11');

                $.accordian('#list2 > div', '#item22', ...{
                    titles:'.mytitle',
                    contents:'.mycontent',
                    onClick:function()...{simpleLog(this.id + ' clicked')},
                    onShow:function()...{simpleLog(this.id + ' shown'); $(this).removeClass('off').addClass('on');},
                    onHide:function()...{simpleLog(this.id + ' hidden'); $(this).removeClass('on').addClass('off');},
                    showSpeed:250,
                    hideSpeed:550
                });

            });

         </ script >

         < style  type ="text/css" > ...
            #list1 .title {...}{ font-weight:bold; }
            #list1, #list2 {...}{ width:20em; }
            .title, .mytitle {...}{ cursor:pointer; border:1px solid #CCCCCC; margin-top:0.5em; padding:0.1em; }
            .on  .mytitle {...}{ background-color:#C0C0C0; }
            .off .mytitle {...}{ background-color:#E0E0E0; }
            .content, .mycontent    {...}{ background-color:#F5F5F5; padding:0.1em; border:1px solid #C0C0C0; border-top-width:0; }
            #log {...}{ position:absolute; top:0; right:1em; text-align:right; }
         </ style >

     </ head >

     < body >

         < h1 > Standard </ h1 >

         < div  id ="list1" >
             < div  id ="item11" >
                 < div  class ="title" > Lorem ipsum dolor sit amet </ div >
                 < div  class ="content" >
                    consectetuer adipiscing elit < br />
                    Sed lorem leo < br />
                    lorem leo consectetuer adipiscing elit < br />
                    Sed lorem leo < br />
                    rhoncus sit amet
                 </ div >
             </ div >

             < div  id ="item12" >
                 < div  class ="title" > elementum at </ div >
                 < div  class ="content" >
                    bibendum at, eros < br />
                    Cras at mi et tortor egestas vestibulum < br />
                    sed Cras at mi vestibulum < br />
                    Phasellus sed felis sit amet
                 </ div >
             </ div >

             < div  id ="item13" >
                 < div  class ="title" > orci dapibus semper. </ div >
                 < div  class ="content" >
                    Morbi eros massa < br />
                    interdum et, vestibulum id, rutrum nec < br />
                    bibendum at, eros < br />
                    Cras at mi et tortor egestas vestibulum < br />
                    Phasellus sed felis sit amet < br />
                    Morbi eros massa < br />
                    interdum et, vestibulum id, rutrum nec < br />
                    Phasellus sem leo
                 </ div >
             </ div >
         </ div >

         < h1 > With options </ h1 >

         < div  id ="list2" >
             < div  id ="item21" >
                 < div  class ="mytitle" > Lorem ipsum dolor sit amet </ div >
                 < div  class ="mycontent" >
                    consectetuer adipiscing elit < br />
                    Sed lorem leo < br />
                    lorem leo consectetuer adipiscing elit < br />
                    Sed lorem leo < br />
                    rhoncus sit amet
                 </ div >
             </ div >

             < div  id ="item22" >
                 < div  class ="mytitle" > elementum at </ div >
                 < div  class ="mycontent" >
                    bibendum at, eros < br />
                    Cras at mi et tortor egestas vestibulum < br />
                    sed Cras at mi vestibulum < br />
                    Phasellus sed felis sit amet
                 </ div >
             </ div >

             < div  id ="item23" >
                 < div  class ="mytitle" > orci dapibus semper. </ div >
                 < div  class ="mycontent" >
                    Morbi eros massa < br />
                    interdum et, vestibulum id, rutrum nec < br />
                    bibendum at, eros < br />
                    Cras at mi et tortor egestas vestibulum < br />
                    Phasellus sed felis sit amet < br />
                    Morbi eros massa < br />
                    interdum et, vestibulum id, rutrum nec < br />
                    Phasellus sem leo
                 </ div >
             </ div >
         </ div >

         < div  id ="log" >< div >< strong > Log of the 2nd accordion </ strong ></ div ></ div >

     </ body >

</ html >