Javascript 第二次点击关闭手风琴
我需要修复这个代码,以便手风琴可以打开和关闭点击。我正在使用一个wordpress主题,其中包括一个手风琴模块,并试图操纵代码以满足我的需要 这是手风琴Javascript 第二次点击关闭手风琴,javascript,php,jquery,wordpress,accordion,Javascript,Php,Jquery,Wordpress,Accordion,我需要修复这个代码,以便手风琴可以打开和关闭点击。我正在使用一个wordpress主题,其中包括一个手风琴模块,并试图操纵代码以满足我的需要 这是手风琴 ( function( $ ){ $( document ).ready( function () { // Expand/Collapse on click $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title'
( 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 );
}
}
指向包含问题内容的示例页面的链接可能有助于建议正确答案,但对于代码分析,我有一个可行的解决方案
尝试使用以下代码,并将相同的代码放入js脚本中,以便在第二次单击时关闭手风琴
$( ".dslc-accordion" ).accordion({
icons: icons,
collapsible: true
});
让我知道它是否有效 我们将讨论什么主题和模块?