用子菜单实现scrollspy？答案

【问题标题】：Materialize scrollspy with submenu?用子菜单实现scrollspy？
【发布时间】：2016-03-01 20:19:40
【问题描述】：

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

<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 来实现呢？

【问题讨论】：

标签： javascript jquery twitter-bootstrap materialize scrollspy

【解决方案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 的相关性——但它在嵌套列表元素确实被突出显示的意义上是有效的。

【讨论】：