[英]Close accordion on second click
我需要修復此代碼,以便手風琴可以單擊打開和關閉。 我正在使用一個包含手風琴模塊的wordpress主題,並試圖操縱代碼來滿足我的需求。
這是手風琴.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 );
}
}
任何有關如何解決此問題的見解將不勝感激。
謝謝!
指向包含問題內容的示例頁面的鏈接可能有助於提出正確的答案,但是對於您的代碼分析,我有一個可行的解決方案。
嘗試使用以下代碼,並將其放入js腳本中,以使第二次單擊時手風琴關閉。
$( ".dslc-accordion" ).accordion({
icons: icons,
collapsible: true
});
讓我知道它是否有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.