ブートストラップ3 Collapse - このパネルを開いたままにする必要があります

Question

私はsiteです。左側のメニューには、パネルの折りたたみ（ブートストラップ）を伴うカテゴリmakeがあります。質問：カテゴリを選択するときには、このパネルを開いておく必要があります。パネルが更新されたためにパネルが閉じました。 これは、パネルのコードです：アクティブなクラスのための、オープンパネルの

<div class="panel-heading"> 
    <h4 class="panel-title"> 
     <a data-toggle="collapse" href="#collapse2">Электрика</a> 
    </h4> 
    </div> 
    <div id="collapse2" class="panel-collapse collapse"> 
    <ul class="list-group"> 
    <?php foreach ($categories2 as $categoryItem): ?> 
     <li class="list-group-item"> 
      <a href="/category2/<?php echo $categoryItem['id'];?>" class="list2"> 
      <p style="text-align: left; height: 5px;"><?php echo $categoryItem['name'];?></p> 
      </a> 
     </li> 
    <?php endforeach; ?> 
    </ul> 
    </div> 

JSコード：

var $dropdowns = $('.list-group-item'); 
var $collapse = $('.panel-collapse'); 
$dropdowns.click(function() { 
    if ($(this).hasClass('active')){ 
    $(this).toggleClass('active'); 
    $collapse.show(); 
    }else { 
    $dropdowns.removeClass('active'); 
    $(this).toggleClass('active'); 
    }}); 

Answer 1

費やさようなメニューを表示するには、クラスと1つの余分な属性 「の」を追加しますaria-expanded = "true"

<div id="collapse2" class="panel-collapse collapse in" aria-expanded="true"> 

サンプルコードは次のようになります。

<div class="panel-heading"> 
    <h4 class="panel-title"> 
     <a data-toggle="collapse" href="#collapse2">Электрика</a> 
    </h4> 
    </div> 
    <div id="collapse2" class="panel-collapse collapse in" aria-expanded="true"> 
    <ul class="list-group"> 
    <?php foreach ($categories2 as $categoryItem): ?> 
     <li class="list-group-item"> 
      <a href="/category2/<?php echo $categoryItem['id'];?>" class="list2"> 
      <p style="text-align: left; height: 5px;"><?php echo $categoryItem['name'];?></p> 
      </a> 
     </li> 
    <?php endforeach; ?> 
    </ul> 
    </div> 

Answer 2

すべてのページの読み込み時にURLを確認する必要があります。 PHPを使用してこれを実行し、アクティブなクラスを追加するかどうかを決定することができます。ブートストラップのアクティブなクラスはinのようです。次のように私はちょうど1行のコードを変更します：

<div id="collapse2" class="panel-collapse collapse <?= ($url === "page1")?"in":"" ?>" aria-expanded="true"> 

$urlは、あなたがwww.example.com/ ページ1のように取得しようとしている現在のURIを表し、URIは$url = $_SERVER['REQUEST_URI']によって得ることができます。残りの部分はif条件を短くするための単なる三項演算子です。

Answer 3

ページのロードにオープンする（またはデフォルト開くように）なっているあなたのメニューリンクのJSのID

<a data-toggle="collapse" href="#collapse2" id="click_menu">Электрика</a> 

ページロードのJS機能以下のコール

function default_menu_selection() { 
    $("#click_menu").trigger('click') 
} 

を追加します。

これは、ページの更新時にメニューを開きます

http://api.jquery.com/trigger/