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

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

0 голосов
/ 15 января 2019

Я пытаюсь использовать хорошее дополнение под названием 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 ]

0 голосов
/ 20 января 2019

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

0 голосов
/ 16 января 2019

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

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;
...