Материализовать scrollspy с подменю?

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, хотя. Есть ли способ заставить это работать из коробки с Materialize? Если нет, как я могу реализовать это с помощью своего собственного 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 корреляцию с оглавлением - но работает в том смысле, что вложенные элементы списка становятся выделенными.