有没有办法在Bootstrap的面板中嵌套面板？

Question

我有一个侧边栏，其中有3个级别的导航，您在到达时看到的主要导航页面，然后当您单击那些面板打开以显示更多导航...然后当这些链接出现时再出现一个级别点击。谁知道我会怎么做？我尝试在面板内制作面板但每次我在主导航中打开辅助导航它关闭主面板，然后如果再次打开主面板它会显示第三个导航面板。我希望能够立刻看到所有3个打开，然后点击打开和关闭。如果我想要实现的目标和我的代码，我已经包含了一张图片。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Business Development
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="border-bottom: 1px solid #67ab48;">
      <div class="panel-body">
        <ul class="list-unstyled">
<li class="sidebar-links">
<div class="panel-heading" role="tab" id="headingSeven">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">Link 1</a></div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
      <div class="panel-body">
    <ul>
        <li>List a</li>
        <li>List b</li>
        <li>List c</li>
    </ul>
        </div>
    </div>
</li>
<li class="sidebar-links"><a href="#">Link 1</a><br></li>
<li class="sidebar-links"><a href="#">Link 1</a><br></li>
<li class="sidebar-links"><a href="#">Link 1</a><br></li>
</ul>
      </div>
    </div>
  </div>


  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Proposals & Web Inquiries
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo" style="border-bottom: 1px solid #67ab48;">
      <div class="panel-body">
       <ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
      </div>
    </div>
  </div>


  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Sold Systems
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree" style="border-bottom: 1px solid #67ab48;">
      <div class="panel-body">
       <ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Marketing
        </a>
      </h4>
    </div>
    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour" style="border-bottom: 1px solid #67ab48;">
      <div class="panel-body">
       <ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
      </div>
    </div>
  </div>


  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          Reports
        </a>
      </h4>
    </div>
    <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive" style="border-bottom: 1px solid #67ab48;">
      <div class="panel-body">
       <ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
      </div>
    </div>
  </div>


  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
         Admin
        </a>
      </h4>
    </div>
    <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix" style="border-bottom: 1px solid #67ab48;">
      <div class="panel-body">
       <ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
      </div>
    </div>
  </div>


</div>

        </div>