Question

我创建了一个使用wordpress主题的网站，该主题具有带内置模块的实时作曲家。我正在尝试更改编辑此手风琴，以便在点击时打开和关闭。

以下是html的示例

<div class="dslc-accordion">
<div class="dslc-accordion-item">
    <div class="dslc-accordion-header dslc-accordion-hook">
        <span class="dslc-accordion-title" style="font-size:16px; background-color:#f37024; color:#ffffff; font-family:Montserrat; padding:12px; margin-bottom:15px">bar equipment/supplies</span>
    </div>
    <div class="dslc-accordion-content">

    <a href="http://www.enofrigo.it/ita/index.php" target="_blank" style="font-size:14px; color:#f37024; font-family:Montserrat; padding-left:12px;">
        <img src="http://www.desertpeak.biz/temp_private_home/wp-content/uploads/2014/05/enofrigo.jpg" style="margin-bottom:5px"/>
        </a>
        <p style="font-size:13px; color:#f37024; font-family:Montserrat; padding-left:12px">
        <i>Wine Coolers, Cellars, and Refrigerators</i>
        </p>
        <p style="font-size:13px; color:#4d4d4f; font-family:Montserrat; padding-left:12px; line-height:16px">
        Established in 1978, the history of <i>Enofrigo</i> is characterized by the capacity of projecting and realizing the most elegant and innovative solutions in the foodservice industry. <i>Enofrigo</i> specializes in projecting and manufacturing refrigerating, hot and neutral units for foodservice/dining rooms, always looking for high-quality innovative technologic solutions in gastro-buffets, catering, restaurant/hotel showcases, bakeries, and supermarkets. 
        </p><br>

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

以下是我认为与之相关的剧本：

( 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);

Answer 1

我希望你想要这样的东西？ HTML

<ul id="accordion">
    <li rel="1"> 
        <div class="title">title 2</div>
        <div class="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
    </li>
     <li rel="1"> 
        <div class="title">title 1</div>
        <div class="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
    </li>
    <li rel="1"> 
        <div class="title">title 1</div>
        <div class="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
    </li>
<ul>

JS

$(document).ready(function(){
    $("#accordion li .title").click(function(){
        if($(this).parent().attr("rel")=="1"){
         $(".content",$(this).parent()).stop(true,true).slideUp(500);
          $(this).parent().attr("rel","0")  
    }else {
        $(".content",$(this).parent()).stop(true,true).slideDown(500);
          $(this).parent().attr("rel","1") 
    }
    })

})

CSS

.title {background:#006;color:#fff}

http://jsfiddle.net/77njo5wz/3/

在第二次点击时将手风琴改为关闭

1 个答案: