jQuery手风琴插件

Posted 2021-02-24

This is a simple accordion plugin that i wrote. Hope it comes in handy.

/* 
 *  jQuery Plugin name :  Accordion 
 *  descriptions :        A simple jQuery Accordion plugin
 *  created by :          Neil Pearce on 13/6/2011
 *  URL :                 http://www.neilrpearce.co.uk
 *  
 *  1. The defaults variable is an object that acts like an array with aBtn, aContent and active as the
 *     keys and each hold a value that we will use as a CSS class. We then merge 'options' with 'defaults'
 *     and add them to the jQuery object for later use using the $.extend() method.
 *  
 *  2. This doesn't need to be here and is only used to open up a panel by default. 
 *     To keep things simple i have declared a variable 'o' and stored the options within. Then we hide all panels with
 *     the class of 'content' and we then loop over the main buttons(aBtn) using the each() method to see which is 
 *     active(has a class of open)and then open up it's siblings(in this case a table) using the slideDown() method.
 *
 *  3. Using the variable 'obj' we check to see what button(aBtn) has been clicked and see if it has a class of 'open'. If
 *     it has, we set it to false and close it up, but if it doesn't we add the class and open it up. Simple hey!         
 *  
 *  
 */
 
/* Usage - also see bottom of snippet
 
    $("#accordion").accordion();
 
*/
 
(function($){
 
    // #1
    $.fn.accordion = function(options) {
        // set some defaults
        var defaults = {
            aBtn: 'btn',
            aContent: 'content',
            active: 'open'
        },
 
        // merge together
        options = $.extend({}, defaults, options);
 
        // #2
        var o = options;
 
        $(function(){        
           // hide all the content panels from the off
           $('.' +o.aContent).hide();
           // traverse the dom(loop over) to see which is active(has a class of open) 
           // and then open up it's siblings(I.E table)            
           $('.' +o.aBtn).each(function(){
             if($(this).hasClass(o.active)){
                $(this).siblings().slideDown();        
               }  
           }); 
        });
 
        // #3	
        // check for click events
        $('.'+o.aBtn).click(function() {
            var obj = $(this);
            // check see if we have click the currently active tab
            // as we won't be able to check after closing the tabs!
            var slide = true;		
            if(obj.hasClass('open'))
            {
                slide = false;
            }			
            // close all the current elements
            $('.'+o.aContent).slideUp().removeClass(o.active);
            $('.'+o.aBtn).removeClass(o.active);
 
            // check if we should still slide
            if(slide)
            {		
                // make the clicked button active and open	
                obj.addClass(o.active);
                obj.siblings('.'+o.aContent).addClass(o.active).slideDown();
            }
 
            // #4
 
            return false;					   
        });
 
        return this;
    };
 
})(jQuery);
 
/******* THE html ***************/
 
 <ul class="accordion">
                <li><a href="#" class="btn open">fixtures</a>
                    <div class="content">
 
                        <h2>Tuesday 7th June 2011</h2>
 
                        <table border="0">
 
                            <tbody>
 
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">West Ham United</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Sunderland</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Stoke City</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Wigan Athletic</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Newcastle United</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">West Bromwich Albion</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Everton</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Chelsea</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Manchester United</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Blackpool</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Fulham</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Arsenal</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Aston Villa</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Liverpool</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Tottenham Hotspur</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Birmingham City</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Wolverhampton Wanderers</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Blackburn Rovers</td>
                                </tr>
                                <tr>
                                    <td class="fixt-time">15:00</td>
                                    <td class="fixt-name fixt-left">Bolton Wanderers</td>
                                    <td class="fixt-vs">vs</td>
                                    <td class="fixt-name">Manchester City</td>
                                </tr>
 
                            </tbody>
 
                        </table>
 
                    </div>
                </li>