マルチパートブートストラップ3アコーディオンメニューの正しい部分を開くにはどうすればよいですか？

Question

私は現在、プロジェクトにアコーディオンメニューを追加しようとしています。アコーディオンメニューを取得して正しいセクションを展開し、現在の選択をURLに基​​づいて強調表示しようとしています。いくつかのJSを使用してページURLと一致するエントリにclass="active"を追加するだけです。

私の問題は2つのアコーディオンセクションがあり、ページに移動するときにこのエントリを含むセクションを開くことです。すべての種類のハックと私はここで何かが欠けていると感じています。メニューのデフォルト状態は、ここで私のHTMLに見られるように、すべてのセクションを読み込み時に閉じることです（私はそれを単純化して消毒しました）：

<div class="accordion fontsome" id="leftMenu"> 
    <div class="accordion-group"> 
     <a class="accordion-toggle accordion-heading" data-toggle="collapse" data-parent="#leftMenu" href="#collapseTwo"> 
        Red Products <i class="pull-right fa fa-caret-down" aria-hidden="true"></i> 
      </a> 
     <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; "> 
      <div class="accordion-inner"> 
       <ul> 
        <li><a href="product?pid=1">Product 1</a></li> 
        <li><a href="product?pid=2">Product 2</a></li> 
        <hr> 
        <li><a href="product?pid=3">Product 3</a></li> 
        <li><a href="product?pid=4">Product 4</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
      <a class="accordion-toggle accordion-heading" data-toggle="collapse" data-parent="#leftMenu" href="#collapseThree"> 
        Blue Products <i class="pull-right fa fa-caret-down" aria-hidden="true"></i> 
      </a> 
     <div id="collapseThree" class="accordion-body collapse" style="height: 0px; "> 
      <div class="accordion-inner"> 
       <ul> 
        <li><a href="product?pid=5">Product 5</a></li> 
        <li><a href="product?pid=6">Product 6</a></li> 
        <hr> 
        <li><a href="product?pid=7">Product 7</a></li> 
        <li><a href="product?pid=8">Product 8</a></li> 
       </ul> 
      </div> 
      </div> 
    </div> 
</div> 

すべてのポインタが素晴らしいでしょう。私は、記事や自分のアイデアに基づいて試したJSハックを省略しました。彼らが助けるならば、提供することができます。

Answer 1

私はこれが正しいかどうかわからない、あるいはもう一つのハックな解決策ですが、もし私がこの問題を抱えていたら、おそらくアコーディオンをPHPファイルに張り付けるでしょう。私は$_SERVER['REQUEST_URI']から値を読み取って、正しいアコーディオンを表示するためにどちらをアクティブにするべきかに応じてHTML出力を修正することができました。私は本当にモジュラーな方法で私のサイトをすべて設計するのが好きなので、私は通常、このテクニックを使用して、実際のページとは別のPHPファイルに入れたときにactiveクラスをナビバに設定します。

もちろんサーバーはPHPをサポートするように設定されていませんが、これはまったく役に立たないですが、これが役立つことを願っています。