Bootstrap 3侧边栏sumbenu扩展

Question

试图理解推特 bootstrap 3 侧边栏导航，例如：http://getbootstrap.com/javascript/

这里已经有很多关于它的问题了（主要是关于词缀的），但我有一个具体的问题。

我明白了：

$('#sidemenu').affix({
    offset: {
        top: 60
    }
});

我不明白 scrollspy + 扩展子菜单 是如何实现的，例如仅在 活动章节 中显示了 子章节 （也是 scrollspy-ed）。如下图红圈所示：

谁能解释一下什么是基本原理？它是通过纯 CSS (AFAIK) 实现的，但是当我通过 http://getbootstrap.com/assets/css/docs.min.css 阅读时并没有找到它是如何实现的。

Answer 1

您是在问为什么它们只在较大的视图上显示子菜单而在较小的视图上不显示？

在媒体查询之前你会发现ul被隐藏了：

.bs-docs-sidebar .nav .nav {
    display: none;
    padding-bottom: 10px;
}

然后当它在媒体查询中处于活动状态时，它会显示：

@media (min-width:992px) { 
    .bs-docs-sidebar .nav>.active>ul {
        display: block
    }
   .... more styles go here ....
}

提示：不要看缩小的 CSS。

如果你想知道scrollspy是如何在子菜单项上实现的，它与大的方式相同，内容的每个ID对应于菜单中的link。

Bootstrap 3 sidebar sumbenu expansion