嵌套下拉列表答案

【问题标题】：Nested dropdowns in materialize嵌套下拉列表
【发布时间】：2015-12-20 17:07:43
【问题描述】：

是否可以实现嵌套的下拉菜单？第二个下拉菜单应该在右侧

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

这样的嵌套不起作用。有什么想法吗？

感谢阿尔伯特 M.

【问题讨论】：

标签： nested materialize dropdown

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

http://materializecss.com/collapsible.html

【讨论】：

【解决方案3】：

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

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

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

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

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

示例：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/

【讨论】：

效果不错，但是使用这个方法有问题。我的问题是下拉菜单无法滚动。如何解决？
好吧，不幸的是下拉菜单是在它的父级内容中生成的，所以还没有办法使用 materializecss 嵌套和可滚动的下拉菜单。如果您的可滚动下拉列表没有嵌套子项，您可以做的是重命名第一个类并仅在需要嵌套类型时使用它。我会在我的回答中添加一些解释。

【解决方案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/

【讨论】：