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

【问题标题】：How to properly set TOCBOT with Bootrap-4如何使用 Bootstrap-4 正确设置 TOCBOT
【发布时间】：2019-06-09 16:45:08
【问题描述】：

我正在尝试使用名为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：我希望能够通过颜色、背景颜色或边距设置使最后点击的（当前）链接脱颖而出。这如何实现？

【问题讨论】：

标签： javascript html css bootstrap-4 tableofcontents

【解决方案1】：

试试这个。

1) 让我们更明确地设置 CSS 以覆盖 tocs CSS，而不使用 !important

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

2) 白线是使用a.toc-link::before 伪选择器创建的。由于它使用height:inherit，因此高度可能会根据您使用的设备/屏幕尺寸而改变，因此让我们使用 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) 为锚标签设置点击事件监听器，并添加一个类将颜色更改为红色。

$('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 类

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

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

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

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

【讨论】：

感谢您为回答问题所付出的努力。您的回答反映了您在 JS 方面有很强的背景。我还在学习基础知识！再次感谢。

【解决方案2】：

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

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

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

这样就不用再写JS了。

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

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

GitHub Thread

【讨论】：