jquery - 如何使超链接同时展开并流向所需的文本？

Question

我正在学习网络开发。下面的代码有效。我想对其进行修改，以便当单击左侧标题为“0.0 Forward”的父链接时，会同时发生两件事:

1-列表展开以显示子节点(现在工作正常)。

2-浏览器滚动以显示该超链接上引用的文本。这里的问题是，HREF 值“ulExpCol”_10 引用了导航代码中的 ID，因此可以进行节点的扩展。现在，由于 HREF 必须指向 ID 值，并且 ID 值必须是唯一的，因此我无法在值“item-0.0”的文本正文中使用目标 id。如果我这样做，扩张将不会加快。

所以，看起来我可以让列表展开或让超链接工作，但不能同时使用两者。它是否正确？是否有解决此限制的方法(可能使用 js/jquery)？

谢谢。注意:为了演示问题，故意将正文宽度变小。

JSFiddle Code

<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/