如何打開多部分Bootstrap 3手風琴菜單的正確部分？

Question

我目前正在爲一個項目添加一個手風琴菜單，並且我試圖讓手風琴菜單擴展正確的部分，並突出顯示當前選擇基於URL（後面我已經整理出只是改變添加class="active"到與使用JS的頁面URL匹配的條目

我的問題是，我有兩個手風琴部分，並希望打開包含此條目，當我導航到頁面我試過各種各樣的黑客，我有一種感覺，我在這裏錯過了一些東西。菜單的默認狀態是讓所有部分在加載時關閉，就像在我的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輸出以顯示正確的手風琴。我喜歡以真正模塊化的方式設計我的所有網站，所以我通常使用這種技術在導航欄中設置active類，當我將它們放在單獨的PHP文件中時，它們就位於實際頁面中。

當然，如果您的服務器沒有設置爲支持PHP，這完全沒有幫助，但我希望這有助於。