当侧边栏关闭时,jQuery Accordion选项卡应该关闭

时间:2016-11-08 00:28:14

标签: javascript jquery html css twitter-bootstrap

我有侧边栏,当点击加号图标时会打开它有一个手风琴,可以打开,侧边栏关闭时不关闭手风琴。手风琴保持打开状态。

如果侧边栏关闭,手风琴会自动关闭吗?

请参阅以下代码: 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"});

1 个答案:

答案 0 :(得分:0)

您需要使用

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

Jsfiddle