[英]Change accordion to close on second click
我制作了一個使用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);
我希望你想要這樣的東西? 的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}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.