2016-11-08 94 views
0

我有侧边栏,当单击加号图标时它会打开,并且它有一个手风琴,可以打开并关闭边栏而不关闭手风琴。手风琴保持开放。当侧边栏关闭时jQuery 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"}); 

回答

0

您需要使用

$("#accordion").accordion('option', {active: false}); 

Jsfiddle