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级卷轴的工作示例？

非常感谢你的时间！

Answer 1

好吧，嵌入到第3级并不是很难，只需轻松地按照你的第2级做，然后进行第3级。

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

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

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

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

带有bootstrap scrollspy的3级层次结构？

1 个答案: