类似于组件网站上的引导侧边栏导航

我想构建一个侧边栏导航，它的行为与bootsrap组件页面上的行为完全相同，不同之处在于它应该显示在左侧：http://getbootstrap.com/components/

要求：

设置与上次查看标题相关的活动类
折叠/展开子项

有没有预先定义的方法来实现这一点？

http://afeld.github.io/bootstrap-toc/

您可以在该页面上找到Bootstrap正在使用的确切目录。

用法

除了正常的Bootstrap设置（请参阅他们的入门指南）之外，您还需要包括Bootstrap目录样式表和JavaScript文件。

<!-- add after bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.3.0/dist/bootstrap-toc.min.css">
<!-- add after bootstrap.min.js -->
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.3.0/dist/bootstrap-toc.min.js"></script>

通过数据属性

最简单

创建一个具有data-toggle="toc"属性的<nav>元素。

<nav id="toc" data-toggle="toc"></nav>

你可以把这个放在你喜欢的页面上的任何地方。由于该插件利用了Bootstrap的Scrollspy插件，您还需要向<body>:添加几个属性

<body data-spy="scroll" data-target="#toc">

通过JavaScript

如果您需要自定义

如果你喜欢用另一种方式创建导航元素（例如在单页应用程序中），你可以将jQuery对象传递到Toc.init().

$(function() {
var navSelector = '<something>';
var $myNav = $(navSelector);
Toc.init($myNav);
  $('body').scrollspy({
    target: navSelector
  });
});

有关初始化该插件的更多信息，请参阅Scrollspy文档。

选项

调用Toc.init()时，可以传入<nav>元素的jQuery对象（如上所示），也可以传入选项对象：

Toc.init({
  $nav: $('#myNav'),
  // ...
});

除非另有说明，否则所有选项都是可选的。

相关内容

最新更新

热门标签：