带自举滚动的3级层次？

Question

我想添加另一个层次结构到我的existing 2-level scrollspy。我试图通过添加更多关卡来嵌套它，但这根本不起作用。

  <ul class="nav nav-stacked"> 
       <li><a href="#GroupASub1">Sub-Group 1</a></li> 
       <li><a href="#GroupASub2">Sub-Group 2</a></li> 
      </ul> 

这样做的最好方法是什么？有没有找到3级Scrollspy的工作示例？

非常感谢您的时间！

Answer 1

嗯，嵌套到第三级并不是很难，只需轻松按照第2级所做的操作即可完成第3级。

例如，我在这里有一个演示http://codepen.io/mhadaily/pen/dpdvwp，我分叉你的工作并嵌套到第三级。

我希望这个示例代码有帮助。

澄清：我已经改变了这部分

<section id="GroupA" class="group"> 
      <h3>Group A</h3> 
      <div id="GroupASub1" class="subgroup clearfix"> 
       <h4>Group A Sub 1</h4> 
       <hr> 
       <div class="clearfix"> 
       <div id="GroupASubSub1" class="subsubgroup"> 
       <h4>Group A SubSub 1</h4> 
      </div> 
      <div id="GroupASubSub2" class="subsubgroup"> 
       <h4>Group A SubSub 2</h4> 
      </div> 
       </div> 
      </div> 
      <div id="GroupASub2" class="subgroup"> 
       <h4>Group A Sub 2</h4> 
      </div> 
     </section> 

和

<li> 
       <a href="#GroupA">Group A</a> 
       <ul class="nav nav-stacked"> 
        <li><a href="#GroupASub1">Sub-Group 1</a> 
        <ul class="nav nav-stacked"> 
        <li><a href="#GroupASubSub1">SUBSub-Group 1</a></li> 
        <li><a href="#GroupASubSub2">SUbSub-Group 2</a></li> 
       </ul> 

        </li> 
        <li><a href="#GroupASub2">Sub-Group 2</a></li> 
       </ul> 
      </li> 

和你的CSS代码

.group { 
    background: yellow; 
    width: 200px; 
    height: 800px; 
} 
.group .subgroup { 
    background: orange; 
    width: 150px; 
    height: 400px; 
} 
.group .subsubgroup { 
    background: blue; 
    width: 100px; 
    height: 150px; 


} 
.group .subsubgroup h4 {color:white}