灵活的jQuery垂直手风琴插件

PetitQ 手风琴 2018-10-28 1.57K 0 0

这是一款十分灵活的 jQuery 垂直手风琴插件。之所以说该手风琴插件灵活，是因为可以通过参数设置，使它可以有多种显示形式：手风琴项同时显示多个或一次只显示一个。

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();         
```
```
    });   
```
```
},
```

灵活的 jQuery 垂直手风琴插件

已有 392 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

手风琴

灵活的jQuery垂直手风琴插件

HTML 代码：

JAVASCRIPT 代码：

灵活的 jQuery 垂直手风琴插件

相关文章

jquery横向手风琴效果

简洁Bootstrap手风琴下拉列表美化效果

CSS3+jQuery手风琴面板界面设计

发表回复取消回复

热销模板

手风琴

HTML 代码：

JAVASCRIPT 代码：

灵活的 jQuery 垂直手风琴插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复