2016-11-08 15 views
0

プラスアイコンをクリックしたときに開くサイドバーがあります。アコーディオンがあり、アコーディオンを閉じずにサイドバーを開くと開くことができます。アコーディオンは開いたままです。jQueryサイドバーが閉じられるとアコーディオンタブが閉じる

サイドバーが閉じている場合、アコーディオンが自動的に閉じるべき方法はありますか?

以下のコードを参照してください:あなたは

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

0123を使用する必要が

$(".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

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を

関連する問題