当前位置：首页 > 网页特效 > 导航菜单

jQuery和css3多级手风琴插件

分类：导航菜单日期：2024-05-14 点击(1) 评论(0)

jQuery和css3多级手风琴插件

简介

这是一个简单的jQuery和css3手风琴效果。效果上类似于目录结构。

##### HTML
```html
<ul id="cbp-ntaccordion" class="cbp-ntaccordion">
    <li>
        <h3 class="cbp-nttrigger">Oat cake tootsie roll</h3>
        <div class="cbp-ntcontent">
            <p></p>
            <ul class="cbp-ntsubaccordion">
                <li>
                    <h4 class="cbp-nttrigger">Donut pastry</h4>
                    <div class="cbp-ntcontent"></div>
                </li>
                <li>
                    <h4 class="cbp-nttrigger">Carrot cake</h4>
                    <div class="cbp-ntcontent">
                        
                        <ul class="cbp-ntsubaccordion">
                            <li>
                                <h5 class="cbp-nttrigger">Donut pastry</h5>
                                <div class="cbp-ntcontent"></div>
                            </li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <h4 class="cbp-nttrigger">Tootsie roll marshmallow</h4>
                    <div class="cbp-ntcontent">
                        
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```
##### JAVASCRIPT

```html
;( function( $, window, undefined ) {
    'use strict';
    // global
    var $body = $( 'html, body' );
 
    $.CBPNTAccordion = function( options, element ) {
        this.$el = $( element );
        this._init( options );
    };
    // the options
    $.CBPNTAccordion.defaults = {};
    $.CBPNTAccordion.prototype = {
        _init : function( options ) {
            // options
            this.options = $.extend( true, {}, $.CBPNTAccordion.defaults, options );
            // cache some elements and initialize some variables
            this._config();
            // initialize/bind the events
            this._initEvents();
        },
        _config : function() {
 
            // the clickable items
            this.$items = this.$el.find( '.cbp-nttrigger' );
        },
        _initEvents : function() {           
            this.$items.on( 'click.cbpNTAccordion', function() {
                var $listItem = $( this ).parent();
                if( $listItem.hasClass( 'cbp-ntopen' ) ) {
                    $listItem.removeClass( 'cbp-ntopen' );
                }
                else {
                    $listItem.addClass( 'cbp-ntopen' );
                    $body.scrollTop( $listItem.offset().top );
                }
            } );
        },
        destroy : function() {
            this.$items.off( '.cbpNTAccordion' ).parent().removeClass( 'cbp-ntopen' );
        }
    };
    var logError = function( message ) {
        if ( window.console ) {
            window.console.error( message );
        }
    };
    $.fn.cbpNTAccordion = function( options ) {
        if ( typeof options === 'string' ) {
            var args = Array.prototype.slice.call( arguments, 1 );
            this.each(function() {
                var instance = $.data( this, 'cbpNTAccordion' );
                if ( !instance ) {
                    logError( "cannot call methods on cbpNTAccordion prior to initialization; " +
                    "attempted to call method '" + options + "'" );
                    return;
                }
                if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                    logError( "no such method '" + options + "' for cbpNTAccordion instance" );
                    return;
                }
                instance[ options ].apply( instance, args );
            });
        } 
        else {
            this.each(function() {  
                var instance = $.data( this, 'cbpNTAccordion' );
                if ( instance ) {
                    instance._init();
                }
                else {
                    instance = $.data( this, 'cbpNTAccordion', new $.CBPNTAccordion( options, this ) );
                }
            });
        }
        return this;
    };
} )( jQuery, window );
```

web299.com

jQuery和css3多级手风琴插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果