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：我希望能够通过颜色，背景色或边距设置使最后单击的（当前）链接脱颖而出。如何做到这一点？

Answer 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）为锚标记设置一个on click事件监听器，并添加一个类以将颜色更改为红色。

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

Answer 2

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

我需要在上面的代码中不仅包括“ js-toc”类，还包括“ 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

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

2 个答案: