具体化的嵌套下拉列表

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上浏览开放/已关闭的问题我看到here他们说

Answer 3

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

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

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

Answer 4

如果你使用<collapsible>手风琴功能而不是使用下拉按钮功能，你或许能够得到自己喜欢的东西。

http://materializecss.com/collapsible.html