Как сделать так, чтобы гиперссылка расширялась и передавалась на нужный текст одновременно?

Question

Я учусь веб-разработке.Код ниже работает.Я хочу изменить его так, чтобы при щелчке по родительской ссылке слева с заголовком «0,0 Вперед» одновременно происходили две вещи:

1 - список расширяется, чтобы показать дочерние узлы (этотеперь работает нормально).

2-Браузер прокручивает, чтобы показать текст, на который ссылается эта гиперссылка.Проблема здесь заключается в том, что значение HREF «ulExpCol» _10 относится к идентификатору в коде навигации, так что расширение узлов может иметь место.Теперь, поскольку HREF должен указывать на значение идентификатора, а значение идентификатора должно быть уникальным, я не могу использовать целевой идентификатор в текстовом теле значения «item-0.0».Если я сделаю это, расширение не будет идти в ногу.

Итак, похоже, я мог бы либо получить список для расширения, либо гиперссылку для работы, но не оба.Это правильно?Есть ли работа вокруг этого ограничения (возможно, с использованием js / jquery)?

Спасибо.Примечание: ширина тела сделана небольшой, чтобы продемонстрировать вопрос.

Код JSFiddle

<div class="container">
<div class="row">
   <div class="col">
      <ul>
         <li>
            <a href="#ulExpCol_10" data-toggle="collapse" 
               onclick="$('#thisCollapsedChevron_10').toggleClass('fa-rotate-90')">
            <i id="thisCollapsedChevron_10"></i>
            0.0 Foreward
            </a>
            <!-- Children -->
            <ul id="ulExpCol_10" class="ml-3 list-unstyled collapse">
               <li>
                  <a href="#item-1.1" >
                  1.1 Introduction
                  </a>
               </li>
               <li>
                  <a href="#item-1.2">
                  1.2 Cavalieri's Method of Indivisbles
                  </a>
               </li>
            </ul>
         </li>
      </ul>
   </div>
   <div class="col">
      ...
      <h2 id="item-0.0">
         Forewared
      </h2>
      ...
      <h3 id="item-1.1">
         1.1 Introduction
      </h3>
      ...
      <h3 id="item-1.2">
         1.2 Cavalieri's Method of Indivisbles
      </h3>
      ...
   </div>
</div>

Answer 1

Вы можете добавить новый атрибут данных к родительским ссылкам, например: data-link = "# item-0.0"

И затем в документе готово:

$("a[data-toggle]").each(function(){
    $(this).on('click', function(){
       var link = $('<a href="' + $(this).attr('data-link') + '">click</a>');
       link[0].click();
       link.remove();

    });
});

См .:https://jsfiddle.net/ag4rw69t/