nested - 嵌套下拉列表

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/

像这样嵌套是行不通的。有任何想法吗？

感谢阿尔伯特 M。

score 5 · Accepted Answer

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

只需将其添加到您的 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/

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

score -1 · Accepted Answer

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

http://materializecss.com/collapsible.html

nested - 嵌套下拉列表

4 回答 4

Related

Reference