这是一个简单的jQuery和css3手风琴效果。效果上类似于目录结构。
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
;( 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 );
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!