物化中的嵌套下拉菜单

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

我正在自己寻找解决方案，并在 Github 上搜索 open/closed 问题我看到 here 他们说

Answer 2

如果您使用 <collapsible> 手风琴功能而不是使用下拉按钮功能，您可能会得到您喜欢的东西。

http://materializecss.com/collapsible.html

Answer 3

这不是最好的解决方案，但这是我得到的：

只需将此添加到您的 CSS 文件中：

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

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

这就是我用来从 Materializecss 框架中获取嵌套下拉列表的方法，因为他们还没有在本地实现它。

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

更新：

很遗憾，该方法存在问题。根据定义，overflow (x or y) 属性控制当某些东西超过其大小时容器会发生什么。 overflow-y 的默认值为 auto，因此如果某些内容超出下拉列表的大小，例如，它将变为可滚动的。

Materializecss 默认在其父项中生成下拉菜单的内容，因此如果我们不打开 overflow-y visible，嵌套下拉菜单将消失。但是使用该方法，虽然嵌套下拉菜单工作得很好，但这些下拉菜单将变得不可滚动。

要避免非嵌套下拉列表出现问题，您可以做的是重命名第一个 class 并仅在需要附加嵌套下拉列表时使用它。

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

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

Answer 4

现在，我的问题已经解决了。（在同一个按钮中嵌套下拉和滚动）

这不是最好的方法。这是一个 hack，但对我来说效果很好。

// move sub-menu to new node
$('.dropdown-content.dropdown-nested .dropdown-content').detach().appendTo('.dropdown-block')

// dynamic offset initial
var marginTop = $('a.dropdown-button.btn').css('height')
$('.dropdown-block .dropdown-content').css('margin-top', marginTop)

$('.dropdown-content.dropdown-nested > li > a.dropdown-button').hover(function() {
    var left = $('.dropdown-content.dropdown-nested').position().left
    var width = $('.dropdown-content.dropdown-nested').width()
    // overide left style (preserve original style needed)
    $('.dropdown-block .dropdown-content').attr('style', function(idx, style) {
        return style + 'left: ' + (left + width - 20) + 'px!important'
    });
});

// override mouse event to fix some animation
var isDropdownHover = false;
$('a.dropdown-button, .dropdown-content').mouseenter(function() {
  isDropdownHover = true;
})
$('.dropdown-content').mouseleave(function() {
  // prevent main-menu fadeOut animation when mouseleave
  $('.dropdown-content.dropdown-nested').stop()
  // detect if mouse out of main/sub menu area and force close dropdown
  isDropdownHover = false;
  setTimeout(function() {
    if (isDropdownHover === false)
      $('.dropdown-content.dropdown-nested').fadeOut(225);
  }, 100);
})

https://jsfiddle.net/L9r1ex54/8/

物化中的嵌套下拉菜单

Nested dropdowns in materialize

nested

materialize

dropdown