css - 物化 css 1.0 嵌套下拉菜单

Question

我找到了 Materialize 0.98 的嵌套下拉示例，但它不适用于 Materialize 1.00。我将如何移植它？

v0.98 的工作示例 - https://gist.github.com/the0neyouseek/f1a92b9b8f8962a372c23ef415c63144

我尝试按照升级指南进行操作，但无法正常工作。

Dropdown
Removed gutter option
Removed stopPropagation option
Call plugin on .dropdown-content instead of .dropdown-button
Change attribute data-activates to data-target
Rename classes .dropdown-button to .dropdown-trigger
Rename option belowOrigin to coverTrigger
Removed automatic initialization, initialize it manually as shown in documentation

标签： cssmaterialize

Answer 1

请用 替换data-activates属性data-target。

<a class='dropdown-button btn' href='#' data-target='dropdown1' data-beloworigin="true">Nested DropDown</a>

<ul id='dropdown1' class='dropdown-content dropdown-nested'>
    <li><a class='dropdown-button' href='#' data-target='dropdown2' data-hover="hover" data-alignment="left">one<span class="right-triangle">&#9656;</span></a></li>
    <li><a href="#!">two</a></li>
    <li><a href="#!">three</a></li>
</ul>

<ul id='dropdown2' class='dropdown-content dropdown-nested'>
    <li><a href="#!">one</a></li>
    <li><a class='dropdown-button' href="#" data-target="dropdown3" data-hover="hover" data-alignment="left">two<span class="right-triangle">&#9656;</span></a></li>
    <li><a href="#!">three</a></li>
</ul>

<ul id='dropdown3' class='dropdown-content'>
    <li><a href="#!">three</a></li>
    <li><a href="#!">four</a></li>
    <li><a href="#!">five</a></li>
    <li><a href="#!">six</a></li>
</ul>

Materialize 在 1.0 版中更改了此属性。

看看Materialize Dropdown Doc。