Вложенные раскрывающиеся списки в материализации

Можно ли сделать вложенные раскрывающиеся списки в материализации? второй раскрывающийся список должен быть справа

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

Такое вложение не работает. Любые идеи?

Спасибо Альберт М.


dropdown nested materialize
person Albert Myšák    schedule 23.09.2015    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Я сам ищу решение этой проблемы и, просматривая открытые/закрытые проблемы на Github, вижу, что здесь говорят

введите здесь описание изображения

person Philip O'Brien    schedule 29.09.2015

arrow_upward
5
arrow_downward

Это не лучшее решение, но это то, что я получил:

Просто добавьте это в свой файл 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/

person Malork    schedule 21.09.2016
comment
Он работает хорошо, но при использовании этого метода что-то не так. Моя проблема в том, что выпадающий список не может прокручиваться. Как это исправить? - person jeanzuck; 28.09.2016
comment
Что ж, к сожалению, раскрывающийся список создается внутри содержимого его родителя, поэтому пока нет возможности иметь вложенные и прокручиваемые раскрывающиеся списки с materializecss. Что вы можете сделать, если ваши прокручиваемые раскрывающиеся списки не имеют вложенных дочерних элементов, это переименовать первый класс и использовать его только тогда, когда вам нужен вложенный тип. Я добавлю некоторые пояснения к своему ответу. - person Malork; 28.09.2016

arrow_upward
1
arrow_downward

Теперь я решил свою проблему. (Вложенный раскрывающийся список и возможность прокрутки в одной и той же кнопке)

Это не лучший способ. Это хак, но у меня хорошо работает.

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

person jeanzuck    schedule 29.09.2016

arrow_upward
-1
arrow_downward

Возможно, вы сможете получить что-то по своему вкусу, если будете использовать функцию аккордеона <collapsible>, а не кнопку раскрывающегося списка.

http://materializecss.com/collapsible.html

person soybean    schedule 01.10.2015