第二次点击关闭手风琴

Question

我需要修复此代码，以便手风琴可以在点击时打开和关闭。我正在使用一个包含手风琴模块的wordpress主题，并试图操纵代码以满足我的需求。

这是accordion.js

( function( $ ){

$( document ).ready( function () {

        // Expand/Collapse on click
        $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
            if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
                    return;
            e.preventDefault(); // Keep this AFTER the key filter above

            accordionSwitch( $( this ) );
        });

        // Re-initialize accordion when screen options are toggled
        $( '.hide-postbox-tog' ).click( function () {
            accordionInit();
        });

    });

    var accordionOptions = $( '.accordion-container li.accordion-section' ),
        sectionContent   = $( '.accordion-section-content' );

    function accordionInit () {
        // Rounded corners
        accordionOptions.removeClass( 'top bottom' );
        accordionOptions.filter( ':visible' ).first().addClass( 'top' );
        accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' );
    }

    function accordionSwitch ( el ) {
        var section = el.closest( '.accordion-section' ),
            siblings = section.closest( '.accordion-container' ).find( '.open' ),
            content = section.find( sectionContent );

        if ( section.hasClass( 'cannot-expand' ) )
            return;

        if ( section.hasClass( 'open' ) ) {
            section.toggleClass( 'open' );
            content.toggle( true ).slideToggle( 150 );
        } else {
            siblings.removeClass( 'open' );
            siblings.find( sectionContent ).show().slideUp( 150 );
            content.toggle( false ).slideToggle( 150 );
            section.toggleClass( 'open' );
        }

        accordionInit();
    }

    // Initialize the accordion (currently just corner fixes)
    accordionInit();

})(jQuery);

这是我认为与之相关的module.php：

<?php

class DSLC_Accordion extends DSLC_Module {

    var $module_id;
    var $module_title;
    var $module_icon;
    var $module_category;

    function __construct() {

        $this->module_id = 'DSLC_Accordion';
        $this->module_title = __( 'Accordion', 'dslc_string' );
        $this->module_icon = 'reorder';
        $this->module_category = 'elements';

    }

    function options() {    

        $dslc_options = array(

            array(
                'label' => __( '(hidden) Accordion Content', 'dslc_string' ),
                'id' => 'accordion_content',
                'std' => '',
                'type' => 'textarea',
                'visibility' => 'hidden',
                'section' => 'styling',
            ),
            array(
                'label' => __( '(hidden) Accordion Nav', 'dslc_string' ),
                'id' => 'accordion_nav',
                'std' => '',
                'type' => 'textarea',
                'visibility' => 'hidden',
                'section' => 'styling',
            ),

            array(
                'label' => __( 'Open by default', 'dslc_string' ),
                'id' => 'open_by_default',
                'std' => '1',
                'type' => 'text',
            ),

            /**
             * General
             */

            array(
                'label' => __( 'BG Color', 'dslc_string' ),
                'id' => 'css_bg_color',
                'std' => '',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion',
                'affect_on_change_rule' => 'background-color',
                'section' => 'styling',
            ),
            array(
                'label' => __( 'Border Color', 'dslc_string' ),
                'id' => 'css_border_color',
                'std' => '',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion',
                'affect_on_change_rule' => 'border-color',
                'section' => 'styling',
            ),
            array(
                'label' => __( 'Border Width', 'dslc_string' ),
                'id' => 'css_border_width',
                'std' => '0',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion',
                'affect_on_change_rule' => 'border-width',
                'section' => 'styling',
                'ext' => 'px',
            ),
            array(
                'label' => __( 'Borders', 'dslc_string' ),
                'id' => 'css_border_trbl',
                'std' => 'top right bottom left',
                'type' => 'checkbox',
                'choices' => array(
                    array(
                        'label' => __( 'Top', 'dslc_string' ),
                        'value' => 'top'
                    ),
                    array(
                        'label' => __( 'Right', 'dslc_string' ),
                        'value' => 'right'
                    ),
                    array(
                        'label' => __( 'Bottom', 'dslc_string' ),
                        'value' => 'bottom'
                    ),
                    array(
                        'label' => __( 'Left', 'dslc_string' ),
                        'value' => 'left'
                    ),
                ),
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion',
                'affect_on_change_rule' => 'border-style',
                'section' => 'styling',
            ),
            array(
                'label' => __( 'Margin Bottom', 'dslc_string' ),
                'id' => 'css_margin_bottom',
                'std' => '0',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion',
                'affect_on_change_rule' => 'margin-bottom',
                'section' => 'styling',
                'ext' => 'px',
            ),
            array(
                'label' => __( 'Padding Vertical', 'dslc_string' ),
                'id' => 'css_padding_vertical',
                'std' => '0',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion',
                'affect_on_change_rule' => 'padding-top,padding-bottom',
                'section' => 'styling',
                'ext' => 'px',
            ),
            array(
                'label' => __( 'Padding Horizontal', 'dslc_string' ),
                'id' => 'css_padding_horizontal',
                'std' => '0',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion',
                'affect_on_change_rule' => 'padding-left,padding-right',
                'section' => 'styling',
                'ext' => 'px',
            ),

            /**
             * Header
             */

            array(
                'label' => __( 'BG Color', 'dslc_string' ),
                'id' => 'css_header_bg_color',
                'std' => '',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-header',
                'affect_on_change_rule' => 'background-color',
                'section' => 'styling',
                'tab' => __( 'header', 'dslc_string' )
            ),
            array(
                'label' => __( 'Border Color', 'dslc_string' ),
                'id' => 'css_header_border_color',
                'std' => '#e8e8e8',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-header',
                'affect_on_change_rule' => 'border-color',
                'section' => 'styling',
                'tab' => __( 'header', 'dslc_string' )
            ),
            array(
                'label' => __( 'Border Width', 'dslc_string' ),
                'id' => 'css_header_border_width',
                'std' => '1',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-header',
                'affect_on_change_rule' => 'border-width',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'header', 'dslc_string' )
            ),
            array(
                'label' => __( 'Borders', 'dslc_string' ),
                'id' => 'css_header_border_trbl',
                'std' => 'top right bottom left',
                'type' => 'checkbox',
                'choices' => array(
                    array(
                        'label' => __( 'Top', 'dslc_string' ),
                        'value' => 'top'
                    ),
                    array(
                        'label' => __( 'Right', 'dslc_string' ),
                        'value' => 'right'
                    ),
                    array(
                        'label' => __( 'Bottom', 'dslc_string' ),
                        'value' => 'bottom'
                    ),
                    array(
                        'label' => __( 'Left', 'dslc_string' ),
                        'value' => 'left'
                    ),
                ),
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-header',
                'affect_on_change_rule' => 'border-style',
                'section' => 'styling',
                'tab' => __( 'header', 'dslc_string' )
            ),
            array(
                'label' => __( 'Margin Bottom', 'dslc_string' ),
                'id' => 'css_header_margin_bottom',
                'std' => '0',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-header',
                'affect_on_change_rule' => 'margin-bottom',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'header', 'dslc_string' )
            ),
            array(
                'label' => __( 'Padding Vertical', 'dslc_string' ),
                'id' => 'css_header_padding_vertical',
                'std' => '0',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-header',
                'affect_on_change_rule' => 'padding-top,padding-bottom',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'header', 'dslc_string' )
            ),
            array(
                'label' => __( 'Padding Horizontal', 'dslc_string' ),
                'id' => 'css_header_padding_horizontal',
                'std' => '0',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-header',
                'affect_on_change_rule' => 'padding-left,padding-right',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'header', 'dslc_string' )
            ),

            /**
             * Title
             */

            array(
                'label' => __( 'BG Color', 'dslc_string' ),
                'id' => 'css_title_bg_color',
                'std' => '',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'background-color',
                'section' => 'styling',
                'tab' => __( 'title', 'dslc_string' )
            ),
            array(
                'label' => __( 'Border Color', 'dslc_string' ),
                'id' => 'css_title_border_color',
                'std' => '',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'border-color',
                'section' => 'styling',
                'tab' => __( 'title', 'dslc_string' )
            ),
            array(
                'label' => __( 'Border Width', 'dslc_string' ),
                'id' => 'css_title_border_width',
                'std' => '0',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'border-width',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'title', 'dslc_string' )
            ),
            array(
                'label' => __( 'Borders', 'dslc_string' ),
                'id' => 'css_title_border_trbl',
                'std' => 'top right bottom left',
                'type' => 'checkbox',
                'choices' => array(
                    array(
                        'label' => __( 'Top', 'dslc_string' ),
                        'value' => 'top'
                    ),
                    array(
                        'label' => __( 'Right', 'dslc_string' ),
                        'value' => 'right'
                    ),
                    array(
                        'label' => __( 'Bottom', 'dslc_string' ),
                        'value' => 'bottom'
                    ),
                    array(
                        'label' => __( 'Left', 'dslc_string' ),
                        'value' => 'left'
                    ),
                ),
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'border-style',
                'section' => 'styling',
                'tab' => __( 'title', 'dslc_string' )
            ),
            array(
                'label' => __( 'Color', 'dslc_string' ),
                'id' => 'css_title_color',
                'std' => '',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'color',
                'section' => 'styling',
                'tab' => __( 'title', 'dslc_string' )
            ),
            array(
                'label' => __( 'Font Size', 'dslc_string' ),
                'id' => 'css_title_font_size',
                'std' => '12',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'font-size',
                'section' => 'styling',
                'tab' => __( 'title', 'dslc_string' ),
                'ext' => 'px'
            ),
            array(
                'label' => __( 'Font Weight', 'dslc_string' ),
                'id' => 'css_title_font_weight',
                'std' => '700',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'font-weight',
                'section' => 'styling',
                'tab' => __( 'title', 'dslc_string' ),
                'ext' => '',
                'min' => 100,
                'max' => 900,
                'increment' => 100
            ),
            array(
                'label' => __( 'Font Family', 'dslc_string' ),
                'id' => 'css_title_font_family',
                'std' => 'Open Sans',
                'type' => 'font',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'font-family',
                'section' => 'styling',
                'tab' => __( 'title', 'dslc_string' ),
            ),
            array(
                'label' => __( 'Padding Vertical', 'dslc_string' ),
                'id' => 'css_title_padding_vertical',
                'std' => '15',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'padding-top,padding-bottom',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'title', 'dslc_string' )
            ),
            array(
                'label' => __( 'Padding Horizontal', 'dslc_string' ),
                'id' => 'css_title_padding_horizontal',
                'std' => '15',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-title',
                'affect_on_change_rule' => 'padding-left,padding-right',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'title', 'dslc_string' )
            ),

            /**
             * Content
             */

            array(
                'label' => __( 'BG Color', 'dslc_string' ),
                'id' => 'css_content_bg_color',
                'std' => '',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'background-color',
                'section' => 'styling',
                'tab' => __( 'content', 'dslc_string' )
            ),
            array(
                'label' => __( 'Border Color', 'dslc_string' ),
                'id' => 'css_content_border_color',
                'std' => '#e8e8e8',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'border-color',
                'section' => 'styling',
                'tab' => __( 'content', 'dslc_string' )
            ),
            array(
                'label' => __( 'Border Width', 'dslc_string' ),
                'id' => 'css_content_border_width',
                'std' => '1',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'border-width',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'content', 'dslc_string' )
            ),
            array(
                'label' => __( 'Borders', 'dslc_string' ),
                'id' => 'css_content_border_trbl',
                'std' => 'right bottom left',
                'type' => 'checkbox',
                'choices' => array(
                    array(
                        'label' => __( 'Top', 'dslc_string' ),
                        'value' => 'top'
                    ),
                    array(
                        'label' => __( 'Right', 'dslc_string' ),
                        'value' => 'right'
                    ),
                    array(
                        'label' => __( 'Bottom', 'dslc_string' ),
                        'value' => 'bottom'
                    ),
                    array(
                        'label' => __( 'Left', 'dslc_string' ),
                        'value' => 'left'
                    ),
                ),
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'border-style',
                'section' => 'styling',
                'tab' => __( 'content', 'dslc_string' )
            ),
            array(
                'label' => __( 'Color', 'dslc_string' ),
                'id' => 'css_content_color',
                'std' => '',
                'type' => 'color',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'color',
                'section' => 'styling',
                'tab' => __( 'content', 'dslc_string' )
            ),
            array(
                'label' => __( 'Font Size', 'dslc_string' ),
                'id' => 'css_content_font_size',
                'std' => '12',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'font-size',
                'section' => 'styling',
                'tab' => __( 'content', 'dslc_string' ),
                'ext' => 'px'
            ),
            array(
                'label' => __( 'Font Weight', 'dslc_string' ),
                'id' => 'css_content_font_weight',
                'std' => '400',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'font-weight',
                'section' => 'styling',
                'tab' => __( 'content', 'dslc_string' ),
                'ext' => '',
                'min' => 100,
                'max' => 900,
                'increment' => 100
            ),
            array(
                'label' => __( 'Font Family', 'dslc_string' ),
                'id' => 'css_content_font_family',
                'std' => 'Open Sans',
                'type' => 'font',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'font-family',
                'section' => 'styling',
                'tab' => __( 'content', 'dslc_string' ),
            ),
            array(
                'label' => __( 'Line Height', 'dslc_string' ),
                'id' => 'css_content_line_height',
                'std' => '22',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'line-height',
                'section' => 'styling',
                'tab' => __( 'content', 'dslc_string' ),
                'ext' => 'px'
            ),
            array(
                'label' => __( 'Padding Vertical', 'dslc_string' ),
                'id' => 'css_content_padding_vertical',
                'std' => '25',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'padding-top,padding-bottom',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'content', 'dslc_string' )
            ),
            array(
                'label' => __( 'Padding Horizontal', 'dslc_string' ),
                'id' => 'css_content_padding_horizontal',
                'std' => '25',
                'type' => 'slider',
                'refresh_on_change' => false,
                'affect_on_change_el' => '.dslc-accordion-content',
                'affect_on_change_rule' => 'padding-left,padding-right',
                'section' => 'styling',
                'ext' => 'px',
                'tab' => __( 'content', 'dslc_string' )
            ),



        $dslc_options = array_merge( $dslc_options, $this->shared_options('animation_options') );
        $dslc_options = array_merge( $dslc_options, $this->presets_options() );

        return apply_filters( 'dslc_module_options', $dslc_options, $this->module_id );

    }

    function output( $options ) {

        global $dslc_active;

        if ( $dslc_active && is_user_logged_in() && current_user_can( DS_LIVE_COMPOSER_CAPABILITY ) )
            $dslc_is_admin = true;
        else
            $dslc_is_admin = false;     

        $this->module_start( $options );

        /* Module output stars here */ 

            $accordion_nav = explode( '(dslc_sep)', trim( $options['accordion_nav'] ) );

            if ( empty( $options['accordion_content'] ) )
                $accordion_contents = false;
            else
                $accordion_contents = explode( '(dslc_sep)', trim( $options['accordion_content'] ) );

            $count = 0;

        ?>

                <div class="dslc-accordion" data-open="<?php echo $options['open_by_default']; ?>">

                    <?php if ( is_array( $accordion_contents ) && count( $accordion_contents ) > 0 ) : ?>

                        <?php foreach ( $accordion_contents as $accordion_content ) : ?>

                            <div class="dslc-accordion-item">

                                <div class="dslc-accordion-header dslc-accordion-hook">
                                    <span class="dslc-accordion-title" <?php if ( $dslc_is_admin ) echo 'contenteditable'; ?>><?php echo $accordion_nav[$count]; ?></span>
                                    <?php if ( $dslc_is_admin ) : ?>
                                        <span class="dslca-delete-accordion-hook"><span class="dslca-icon dslc-icon-remove"></span></span>
                                    <?php endif; ?>
                                </div>

                                <div class="dslc-accordion-content">
                                    <div class="dslca-editable-content">
                                        <?php 
                                            $accordion_content_output = stripslashes( $accordion_content ); 
                                            $accordion_content_output = str_replace( '<lctextarea', '<textarea', $accordion_content_output );
                                            $accordion_content_output = str_replace( '</lctextarea', '</textarea', $accordion_content_output );
                                            echo $accordion_content_output;
                                        ?>
                                    </div>
                                    <?php if ( $dslc_is_admin ) : ?>
                                        <div class="dslca-wysiwyg-actions-edit"><span class="dslca-wysiwyg-actions-edit-hook"><?php _e( 'Edit Content', 'dslc_string' ); ?></span></div>
                                    <?php endif; ?>
                                </div><!-- .dslc-accordion-content -->

                            </div><!-- .dslc-accordion-item -->

                        <?php $count++; endforeach; ?>

                    <?php else : ?>

                        <div class="dslc-accordion-item">

                            <div class="dslc-accordion-header dslc-accordion-hook">
                                <span class="dslc-accordion-title" <?php if ( $dslc_is_admin ) echo 'contenteditable'; ?>><?php _e( 'CLICK TO EDIT', 'dslc_string' ); ?></span>
                                <?php if ( $dslc_is_admin ) : ?>
                                    <span class="dslca-delete-accordion-hook"><span class="dslca-icon dslc-icon-remove"></span></span>
                                <?php endif; ?>
                            </div>

                            <div class="dslc-accordion-content">
                                <div class="dslca-editable-content">
                                    Placeholder content. Lorem ipsum dolor sit amet, consectetur
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </div>
                                <?php if ( $dslc_is_admin ) : ?>
                                    <div class="dslca-wysiwyg-actions-edit"><span class="dslca-wysiwyg-actions-edit-hook"><?php _e( 'Edit Content', 'dslc_string' ); ?></span></div>
                                <?php endif; ?>
                            </div><!-- .dslc-accordion-content -->

                        </div><!-- .dslc-accordion-item -->

                    <?php endif; ?>

                    <?php if ( $dslc_is_admin ) : ?>
                        <div class="dslca-add-accordion">
                            <span class="dslca-add-accordion-hook"><span class="dslca-icon dslc-icon-plus"></span></span>
                        </div>
                    <?php endif; ?>

                </div><!-- .dslc-accordion -->

        <?php /* Module output ends here */

        $this->module_end( $options );

    }

}

如何解决这个问题的任何见解将非常感激。

谢谢！

Answer 1

指向包含问题内容的示例页面的链接可能对建议正确的答案很有用，但是为了分析您的代码，我有一个可行的解决方案。

尝试使用以下代码并在js脚本中将其排入队列，以便在第二次点击时关闭手风琴。

$( ".dslc-accordion" ).accordion({
    icons: icons,
    collapsible: true
});

让我知道它是否有效。