如何在可折叠部分中创建指向特定描述元素的链接？

Question

我的描述项目在可折叠元件中，如下所示：

<div class="accordion" id="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Section 1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
        <dl>
          <dt>Element 1-1</dt>
          <dd>The description of element 1-1</dd><br>

          <dt>Element 1-2</dt>
          <dd>The description of element 1-2</dd><br>
        </dl>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Section 2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <dl>
          <dt>Element 2-1</dt>
          <dd>The description of element 2-1</dd><br>

          <dt>Element 2-2</dt>
          <dd>The description of element 2-2</dd><br>
        </dl>
      </div>
    </div>
  </div>
</div>

因此，默认情况下，这两个部分的内容都是隐藏的。如何支持直接链接到：

1. 第2节(因此，应显示该节的内容)；
2. 要素2-2 (因此，第2节的内容应该显示，要点2-2应该集中)？

Answer 1

您可以使用散列url，例如#section2/element2

然后钩子到两个事件:事件处理程序中的window.onload和window.onhashchange，处理location.hash并以编程方式展开特定部分，然后在该节中聚焦特定元素。