我正在尝试在重新加载页面时保留元素的切换状态。现在，他们都接近刷新。
我已尝试在slideToggle，slideUp＆amp;上设置Cookie slideDown但我之前从未使用过cookies。
的jQuery
/* global jQuery */
jQuery( document ).ready( function( $ ) {
// The element to hide/reveal
$( '.bodhi-hide-reveal' ).hide();
$( '.bodhi-reveal-trigger' ).removeClass( 'closed' );
// The trigger to hide/reveal
$( '.bodhi-reveal-trigger' ).click( function( e ) {
e.preventDefault();
// Target only the next element to hide/reveal and toggle it
$( this ).next( '.bodhi-hide-reveal' ).slideToggle();
// Toggle the trigger class
$( this ).toggleClass( 'closed' );
});
// Expand/collapse all button
$( '.expand-collapse-all' ).click( function( e ) {
e.preventDefault();
// Check if there is at least one closed div
if ( $( '.bodhi-reveal-trigger.closed' ).length ) {
$( '.bodhi-reveal-trigger' ).removeClass( 'closed' )
$( '.bodhi-hide-reveal' ).stop().slideUp();
} else if ( $( '.bodhi-reveal-trigger.opened' ).length ) {
$( '.bodhi-reveal-trigger' ).addClass( 'opened' )
$( '.bodhi-hide-reveal' ).stop().slideDown();
} else {
$( '.bodhi-hide-reveal' ).slideToggle();
}
});
});
HTML
<button class="expand-collapse-all">
Expand / Collapse All
</button>
<div class="bodhi-reveal-trigger">
<button>The Trigger</button>
</div>
<div class="bodhi-hide-reveal">
<p>Some content inside the div that will be hidden and revealed.</p>
</div>
<div class="bodhi-reveal-trigger">
<button>The Trigger</button>
</div>
<div class="bodhi-hide-reveal">
<p>Some content inside the div that will be hidden and revealed.</p>
</div>
<div class="bodhi-reveal-trigger">
<button>The Trigger</button>
</div>
<div class="bodhi-hide-reveal">
<p>Some content inside the div that will be hidden and revealed.</p>
</div>
<div class="bodhi-reveal-trigger">
<button>The Trigger</button>
</div>
<div class="bodhi-hide-reveal">
<p>Some content inside the div that will be hidden and revealed.</p>
</div>
小提琴