Как правильно установить TOCBOT с Bootrap-4

Я пытаюсь использовать хорошее дополнение под названием 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. Я хочу, чтобы последняя нажатая (текущая) ссылка выделялась либо по цвету, цвету фона или настройкам полей. Как это можно сделать?

Источник

2 ответа

Решение

Попробуй это.

1) Давайте настроим CSS более явно для переопределения CSS-кодов без использования !important

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

2) Белая линия создается с помощью a.toc-link::before псевдо-селектор. Так как он использует height:inheritвысота может потенциально меняться в зависимости от того, на каком устройстве / размере экрана вы находитесь, поэтому давайте используем jQuery, чтобы получить высоту тега привязки и установить ее равной высоте белой линии.

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

3) Мы не можем напрямую стилизовать ::before с JS, поэтому мы должны динамически вставить его на страницу в виде <style> тег. Обратите внимание на обратные галочки и использование ${} - это известно как литералы шаблона JS

//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) создать .clicked класс в CSS

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

демо: https://jsfiddle.net/b0n4xk1c/

Примечание. Хотя белая линия имеет тот же размер, что и теги привязки, между ссылками есть промежутки из-за полей / промежутков (см. Демонстрацию). Если вы хотите, чтобы линия полностью соединилась, просто добавьте несколько дополнительных пикселей к значению после захвата.

var tocHeight = $('a.toc-link').height() + 6;
Источник

Я связался с автором 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

Источник
Другие вопросы по тегам