リンクをクリックするとアコーディオンメニューが閉じますか？

Question

私はブートストラップを使用してアコーディオンメニューを作成しようとしています。私は解決策を見つけたhereと非常にうまく動作しますが、最後のパネルのオプションメニューのリンクをクリックすると閉じてしまい、どうすればこの問題を解決できますか、2番目のメニューを開く必要があります最初のものを閉じます。私はそれがページがリロードされているので起こると思う。では、どうすればこの問題を解決できますか？

アコーディオン

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-red"> 
     <div class="panel-heading bg-red" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
        Pesquisas 
       </a> 
      </h4> 
     </div><!--/title--> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <ul class="nav nav-pills nav-stacked">      
        <li><a href="@Url.Action("viewAnaliseAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Recebidas</a></li> 
        <li><a href="@Url.Action("viewPesquisaEmAnaliseAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Análise</a></li> 
        <li><a href="@Url.Action("viewPesquisaAprovadaAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Aprovadas</a></li>      
       </ul> 
      </div> 
     </div> 
    </div><!--/panel 1--> 

    <div class="panel panel-red"> 
     <div class="panel-heading bg-red" role="tab" id="headingTwo"> 
      <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        Configurações 
       </a> 
      </h4> 
     </div><!--/title--> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       <ul class="nav nav-pills nav-stacked"> 
        <li><a href="@Url.Action("Index", "Estado")" class="glyphicon glyphicon-th"> Estados</a></li> 
        <li><a href="@Url.Action("Index", "Condado")" class="glyphicon glyphicon-th"> Condados</a></li> 
        <li><a href="@Url.Action("viewAllAdmin","Usuario")" class="glyphicon glyphicon-user"> Usuários</a></li> 
       </ul> 
      </div> 
     </div> 
    </div><!--/panel 2--> 


</div><!--/panel group--> 

Answer 1

私は私の問題を解決しました。私はアコーディオンを制御するのを助けるための修正を行い、それはうまく動作します。

Iやった

HTML

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-red"> 
     <div class="panel-heading bg-red" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a class="collapsed" id="collapseOnee" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
        Pesquisas 
       </a> 
      </h4> 
     </div><!--/title--> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <ul class="nav nav-pills nav-stacked">      
        <li><a href="@Url.Action("viewAnaliseAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Recebidas</a></li> 
        <li><a href="@Url.Action("viewPesquisaEmAnaliseAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Análise</a></li> 
        <li><a href="@Url.Action("viewPesquisaAprovadaAdmin", "Pesquisa")" class="glyphicon glyphicon-th"> Aprovadas</a></li>      
       </ul> 
      </div> 
     </div> 
    </div><!--/panel 1--> 

    <div class="panel panel-red"> 
     <div class="panel-heading bg-red" role="tab" id="headingTwo"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        Configurações 
       </a> 
      </h4> 
     </div><!--/title--> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       <ul class="nav nav-pills nav-stacked"> 
        <li><a href="@Url.Action("Index", "Estado")" class="glyphicon glyphicon-th"> Estados</a></li> 
        <li><a href="@Url.Action("Index", "Condado")" class="glyphicon glyphicon-th"> Condados</a></li> 
        <li><a href="@Url.Action("viewAllAdmin","Usuario")" class="glyphicon glyphicon-user"> Usuários</a></li> 
       </ul> 
      </div> 
     </div> 
    </div><!--/panel 2--> 


</div><!--/panel group--> 

jQueryの

$(document).ready(function() { 
    var collapseItem = localStorage.getItem('collapseItem'); 
    if (collapseItem === '') { 
     var collapseItem = $('#collapseOnee').attr('aria-controls'); 
     localStorage.setItem('collapseItem', collapseItem); 
     collapseItem = localStorage.getItem('collapseItem'); 
    } 
    $(collapseItem).collapse('show') 
}); 


$('.collapsed').on('click', function() { 
    var collapseItem = '#' + $(this).attr('aria-controls'); 
    localStorage.setItem('collapseItem', collapseItem);  
}); 

を修正