Question

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实现这个？

Answer 1

我找到了部分解决方案 - HTML部分无法嵌套。

所以而不是：

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

将会执行以下操作

&lt;

从语义上讲，这是不正确的，因为它与内容列表没有1：1的相关性 - 但它的作用是嵌套列表元素确实被突出显示。

使用子菜单实现scrollspy？

1 个答案: