如何使用 Bootstrap-4 正确设置 TOCBOT

Question

我正在尝试使用名为 TOCBot 的好插件。我有以下两个问题希望有人能帮助我。

问题#1：在那里你可以看到一个明显延伸到列表项之外的白色垂直条。我认为栏应该与垂直内容一样长。有什么方法可以自定义此栏的宽度或长度吗？

JSFiddle。请注意此处未显示的工具参考。

HTML代码：

<body data-spy="scroll" data-target=".js-toc">
    <div class="container-fluid">
    <div class="row">
       <div class="col bg-dark">
          <nav class="js-toc sticky-top py-5"></nav>
       </div>
       <div class="col js-toc-content">
          some text1
          <h1 id="h1root">Root </h1>
          <h2 id="2">Subheading, h2</h2>
          Some text 2
          <h3 id="2">Third level heading</h3>
          Some text 3
          <h3 id="3">Another level 3 heading</h3>
          Some text 4
          <h2 id="4">A second subheading</h2>
          Some text 4   
       </div>
    </div>
</body>

初始化

 tocbot.init({
        tocSelector    : '.js-toc',
        contentSelector: '.js-toc-content',
        headingSelector: 'h1, h2, h3, h4',
        collapseDepth  :  6,
        headingsOffset :  1,
        orderedList    :  true
    });

问题#2：我希望能够通过颜色、背景颜色或边距设置使最后一次单击（当前）link 脱颖而出。如何实现？

Answer 1

试试这个。

1) 让我们更明确地设置 CSS 以在不使用 !important

的情况下覆盖目录 CSS

body a.toc-link{
    color: wheat; 
}

2) 白线是使用a.toc-link::before 伪选择器创建的。由于它使用 height:inherit，高度可能会根据您所穿的 device/screen 尺码发生变化，因此让我们使用 jQuery 获取锚标记的高度并将其设置为高度白线

var tocHeight = $('a.toc-link').height(); //18

3) 我们不能直接用JS给::before设置样式，所以我们必须把它作为<style>标签动态插入到页面中。注意反引号和 ${} 的使用——这被称为 JS template literals

//Create the html
// remember, tocHeight = 18 so we add the 'px' here
var html = `<style>a.toc-link::before {
  height: ${tocHeight}px; 
}</style>`;

//Insert it above the closing `</body>` tag
$('body').append(html);

4) 为锚标签设置点击事件侦听器并添加 class 将颜色更改为红色。

$('a.toc-link').on('click', function(){

  //Remove any previously added classes of 'clicked' to all toc-link elements
  $('a.toc-link').removeClass('clicked');

  //Add the class to the currently clicked anchor tag
  $(this).addClass('clicked');
});

5) 在 CSS

中创建 .clicked class

body a.toc-link.clicked {
  color:red;
}

演示：https://jsfiddle.net/b0n4xk1c/

注意：虽然白线与锚标记的大小相同，但由于链接之间的 margin/spacing 存在间隙（参见演示）。如果您希望线条完全连接，则只需在抓取后向该值添加几个额外的像素即可。

var tocHeight = $('a.toc-link').height() + 6;

Answer 2

我已经联系了 TOCBOT 的作者，他在我的代码中发现了一个错误。此错误与问题 #1 有关。

我需要在上面的代码中包含 "toc" class 而不仅仅是 "js-toc" class。

   <nav class="js-toc toc"  sticky-top py-5></nav>

这样就不用再写JS了

更新：如果你的列表有编号，你也需要做这样的事情，而不是单独依赖参数设置orderedList: true。

.toc>.toc-list li{
    list-style:decimal-leading-zero;
}

GitHub Thread

如何使用 Bootstrap-4 正确设置 TOCBOT

How to properly set TOCBOT with Bootrap-4

html

javascript

css

tableofcontents

bootstrap-4