具体化的嵌套下拉列表

Question

是否可以在物化中进行嵌套下拉？第二次下拉应该在右侧

<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
    <li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="right">Drop Me!</a></li>
    <li><a href="#!">two</a></li>
    <li><a href="#!">three</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
    <li><a href="#!">second one</a></li>
    <li><a href="#!">second two</a></li>
    <li><a href="#!">second three</a></li>
</ul>

https://jsfiddle.net/m0sdcn6e/

像这样的嵌套不起作用.有任何想法吗？

谢谢Albert M.

Answer 1

这不是最好的解决方案,但这就是我得到的:

只需将其添加到您的CSS文件中:

.dropdown-content {
   overflow-y: visible;
}

.dropdown-content .dropdown-content {
   margin-left: 100%;
}

这就是我用来从Materializecss框架获取嵌套Dropdown的原因,因为它们还没有本地实现它.

示例:https://jsfiddle.net/m0sdcn6e/15/

更新:

不幸的是,这种方法存在问题.根据定义,overflow(x或y)属性控制容器超出其大小时会发生什么.默认值overflow-y是auto,因此,如果事情超出了下拉的尺寸,例如,它会成为滚动.

Materializecss默认会在其父级内部生成下拉列表的内容,因此如果我们不转动overflow-y visible,嵌套下拉列表将会消失.但是使用该方法,虽然嵌套下拉列表运行良好,但这些下拉列表将变为不可滚动.

您可以采取哪些措施来避免非嵌套下拉列表中的问题,重命名第一个类并仅在需要附加嵌套类时才使用它.

.dropdown-content.nested {
   overflow-y: visible;
}

示例:https://jsfiddle.net/m0sdcn6e/16/

Answer 2

我自己正在寻找解决方案，并在 Github 上搜索开放/封闭的问题，我看到他们在这里说