如何打开多部分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，这完全没有帮助，但我希望这有助于。