灵活的jQuery垂直手风琴插件

这是一款使用jQuery和css3 transitions制作垂直手风琴插件。

HTML

html结构使用一个class为st-accordion的div作为wrapper，在里面放置一个无序列表。每一个无序列表项是一个手风琴项。span st-arrow是手风琴右边的小箭头。

<div id="st-accordion" class="st-accordion">
    <ul>
        <li>
            <a href="#">
                Item Title
                <span class="st-arrow">Open or Close</span>
            </a>
            <div class="st-content">
                <p>Some content</p>
            </div>
        </li>
        <li> ... </li>
    </ul>
</div>
                

JAVASCRIPT

下面是该手风琴插件的可用参数：

$.Accordion.defaults        = {
    // index of opened item. -1 means all are closed by default.
    open            : -1,
    // if set to true, only one item can be opened. 
    // Once one item is opened, any other that is 
    // opened will be closed first
    oneOpenedItem   : false,
    // speed of the open / close item animation
    speed           : 600,
    // easing of the open / close item animation
    easing          : 'easeInOutExpo',
    // speed of the scroll to action animation
    scrollSpeed     : 900,
    // easing of the scroll to action animation
    scrollEasing    : 'easeInOutExpo'
};
                

通过init函数来初始化该手风琴插件：

_init : function( options ) {
    this.options = $.extend( true, {}, $.Accordion.defaults, options );
    // validate options
    this._validate();
    // current is the index of the opened item
    this.current        = this.options.open;
    // hide the contents so we can fade it in afterwards
    this.$items.find('div.st-content').hide();
    // save original height and top of each item    
    this._saveDimValues();
    // if we want a default opened item...
    if( this.current != -1 )
        this._toggleItem( this.$items.eq( this.current ) );
    // initialize the events
    this._initEvents();   
},
                

_saveDimValues函数保存了手风琴项原来的高度，通过它我们可以知道在打开一个手风琴项时需要滚动多少高度。

如果我们设置一个手风琴项以默认方式打开，那么_toggleItem函数将被调用。

接下来是初始化所有的事件：

_toggleItem函数负责协调手风琴项被点击时的事件。如果有一个手风琴项已经被打开（该项拥有class为st-open），我们将设置current为-1，将高度设置为原始高度。如果点击的手风琴项是关闭的，那么设置current为当前项，然后使它的高度移动到适合内容的高度。通过_scroll函数将页面滚动到当前手风琴项的位置。

_toggleItem         : function( $item ) {
     
    var $content = $item.find('div.st-content');
     
    ( $item.hasClass( 'st-open' ) ) 
             
        ? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({
            height  : $item.data( 'originalHeight' )
        }, this.options.speed, this.options.easing ) )
         
        : ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({
            height  : $item.data( 'originalHeight' ) + $content.outerHeight( true )
        }, this.options.speed, this.options.easing ), this._scroll( this ) )
 
},
                

在_initEvents函数中初始化了两个事件：点击一个手风琴项和窗口的resize。当点击一个手风琴项时，_toggleItem函数被调用，如果我们设置oneOpenedItem为true，那么其它被打开的手风琴项先关闭在打开当前的手风琴项。

_initEvents         : function() {
    var instance    = this;
    // open / close item
    this.$items.find('a:first').bind('click.accordion', function( event ) {
        var $item           = $(this).parent();
        // close any opened item if oneOpenedItem is true
        if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) {
             
            instance._toggleItem( instance.$items.eq( instance.current ) );
        }
        // open / close item
        instance._toggleItem( $item );
        return false;
    });
    $(window).bind('smartresize.accordion', function( event ) {
        // reset original item values
        instance._saveDimValues();
        // reset the content's height of any item that is currently opened
        instance.$el.find('li.st-open').each( function() {       
            var $this   = $(this);
            $this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );       
        });         
        // scroll to current
        if( instance._isOpened() )
        instance._scroll();         
    });   
},
                

CSS代码请参考下载文件。