javascript - 用子菜单实现滚动 spy ？

Question

Materialize有一个scrollspy implementation对于目录，类似于 Bootstrap's 。唯一的问题是它似乎不支持嵌套内容 - 换句话说，我现在有一个目录，它是一个无序列表。我的标记中有一些部分，以便列表元素在 View 中突出显示:

<ul class="section table-of-contents">
  <li><a href="#pre-acquisition">Pre-acquisition</a></li>
  <li><a href="#accessioning">Accessioning</a></li>
  <li><a href="#post-acquisition">Post Acquisition</a></li>
  <li><a href="#templates">Templates for Acquisitions</a></li>
</ul>

然后是页面中的内容/部分

<section id="pre-acquisition" class="section scrollspy" markdown="1">
    content goes here
</section>

等等。我想做的是像 Bootstrap 的文档菜单一样有嵌套部分。我在我的标记中实现了这个，如下所示:

<ul class="section table-of-contents">
  <li><a href="#pre-acquisition">Pre-acquisition</a></li>
  <li><a href="#accessioning">Accessioning</a>
    <ul class="section table-of-contents submenu">
      <li><a href="#accessioning-guidelines">Guidelines</a></li>
      <li><a href="#accessioning-templates">Templates</a></li>
    </ul>
  </li>
  <li><a href="#post-acquisition">Post Acquisition</a></li>
  <li><a href="#templates">Templates for Acquisitions</a></li>
</ul>

具有嵌套内容部分，例如:

<section id="pre-acquisition" class="section scrollspy" markdown="1">
    content
</section>

<section id="accessioning" class="section scrollspy" markdown="1">
    content
<section id="accessioning-guidelines" class="section scrollspy" markdown="1">
    more content
</section>
<section id="accessioning-templates" class="section scrollspy" markdown="1">
    even more content
</section>
</section>

尽管如此，它并没有突出显示我在 UL 中的嵌套部分。有没有办法让它在 Materialise 中开箱即用？如果没有，我如何用自己的 javascript 实现这个？

Answer 1

我找到了部分解决方案 - HTML 部分不能嵌套。

所以代替:

<section id="pre-acquisition" class="section scrollspy" markdown="1">
    content
</section>

<section id="accessioning" class="section scrollspy" markdown="1">
    content
<section id="accessioning-guidelines" class="section scrollspy" markdown="1">
    more content
</section>
<section id="accessioning-templates" class="section scrollspy" markdown="1">
    even more content
</section>
</section>

一个人会做以下事情

<section id="pre-acquisition" class="section scrollspy" markdown="1">
    content
</section>

<section id="accessioning" class="section scrollspy" markdown="1">
    content
</section>
<section id="accessioning-guidelines" class="section scrollspy" markdown="1">
    more content
</section>
<section id="accessioning-templates" class="section scrollspy" markdown="1">
    even more content
</section>

从语义上讲，这是不正确的，因为它与目录不具有 1:1 的相关性，但它的工作原理是嵌套列表元素确实会突出显示。