Question

我正在学习有关Web开发的知识。下面的代码有效。我想对其进行修改，以便在单击标题为“ 0.0 Forward”的左侧的父链接时，同时发生2件事：

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/

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

1 个答案: