Блог

Я использую jQuery.tocify.js плагин javascript для программной генерации оглавления. Однако у меня возникла небольшая проблема. Способ работы плагина заключается в том, что он извлекает каждый h1 , h2 , h3 , и т.д. тег и создает вложенный список, соблюдая глубину.

Проблема, с которой я сталкиваюсь, заключается в том, что если у меня есть h2 с длинной строкой, форматирование в оглавлении получается «неправильным». В частности, первая строка элемента списка является вложенной, но содержимое передается как абзац:

Заголовок верхнего уровня

Дополнительный заголовок с

длинный заголовок

Еще один дополнительный заголовок

Извините за плохое приближение, но я надеюсь, что оно передает то, что я вижу.

Есть ли какой-либо способ настроить элементы списка так, чтобы отступ всего вторичного заголовка был одинаковой глубины, чтобы он получался (приблизительно) как:

Заголовок верхнего уровня

Дополнительный заголовок с

длинный заголовок

Вот пример сгенерированного оглавления (с длинным именем):

 <ul id="tocify-header7" class="tocify-header nav nav-list">
  <li class="tocify-item active" data-unique="the-fifth-(and-successful)-try" style="cursor: pointer;"><a>The Fifth (and Successful) Try</a></li></ul>
 

Похоже nav , и nav-list предполагается, что он поступает из Bootstrap, но я не уверен, что у Bootstrap3 даже есть nav-list класс.

Редактировать: Да, похоже, что плагин несовместим с Bootstrap 3. Полагаю, я буду искать другой плагин.

Вы должны отображать привязки в виде блоков и устанавливать для них максимальную ширину. Это должно заставить их зацикливаться при закрытии, но сохранять все это с тем же отступом.