我有侧边栏,当点击加号图标时打开它,它有一个 Accordion ,可以打开,当侧边栏关闭时不关闭 Accordion 。 Accordion 保持打开状态。
有没有办法在侧边栏关闭时 Accordion 自动关闭。
请看下面的代码: https://jsfiddle.net/bob_js/kefq1bxo/
HTML:
<div class="container">
<i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close"></a>
</header>
<div class="cd-panel-container">
Content
<div class="nav-accord2">
<div id="accordion">
<h3 >Header</h3>
<div>Text 1</div>
</div>
</div>
jQuery:
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
// CHECKING ICON OF .cd-btn-a
if($('.cd-btn-a').hasClass('glyphicon-minus-sign')) {
$('.cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
$('.cd-panel-a').removeClass('is-visible');
}
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
event.preventDefault();
}
});
});
$( function() {
var icons = {
header: "ui-icon-caret-1-s",
activeHeader: "ui-icon-caret-1-n"
};
$( "#accordion" ).accordion({
icons: icons
});
$( "#toggle" ).button().on( "click", function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
} );
$("#accordion").accordion({ header: "h3", collapsible: true, active: false, heightStyle: "content"});
最佳答案
关于javascript - 侧边栏关闭时,jQuery Accordion 选项卡应关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40477027/