javascript - 带 Bootstrap 滚动 spy 的三级层次结构？

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 级滚动 spy 的工作示例？

非常感谢您抽出时间!

Answer 1

嗯，嵌套到第三层并不难，只需轻松地遵循您在第二层所做的事情并为第三层做同样的事情即可。

例如，我这里有一个演示 http://codepen.io/mhadaily/pen/dpdvwp我已经 fork 了你的工作并嵌套到第三层。

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

澄清一下:我已经更改了这部分

<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}