2015-09-23 51 views
5

Có thể tạo các menu thả xuống lồng nhau trong materialize không? thả xuống thứ hai nên được trên bên phảiTrình đơn thả xuống lồng nhau trong materialize

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

lồng nhau như doesnt làm việc này. Bất kỳ ý tưởng?

Cảm ơn Albert M.

Trả lời

2

Tôi đang tìm kiếm một giải pháp này bản thân mình, và trawling thông qua việc mở/đóng các vấn đề trên Github Tôi thấy rằng here họ nói

enter image description here

2

Nó không phải là giải pháp tốt nhất, nhưng đó là những gì tôi nhận:

Chỉ cần thêm video này vào file CSS của bạn:

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

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

Đó là những gì tôi đang sử dụng để có được Dropdown lồng nhau từ khung Materializecss, vì chúng chưa thực thi nó.

Ví dụ: https://jsfiddle.net/m0sdcn6e/15/

UPDATE:

Thật không may, có một vấn đề với phương pháp đó. Theo định nghĩa, thuộc tính overflow (x hoặc y) kiểm soát những gì xảy ra với vùng chứa khi vật gì đó vượt quá kích thước của nó. Giá trị mặc định là overflow-yauto, vì vậy nếu một thứ nào đó vượt quá kích thước của menu thả xuống, ví dụ: giá trị đó sẽ trở thành có thể cuộn được.

Materializecss sinh ra nội dung thả xuống bên trong đó là cha mẹ theo mặc định, vì vậy nếu chúng ta không biến overflow-yvisible, trình đơn thả xuống lồng nhau sẽ biến mất. Nhưng với phương thức, trong khi các trình đơn thả xuống lồng nhau hoạt động khá tốt, các trình đơn thả xuống này sẽ trở thành không thể kiểm soát được.

Những gì bạn có thể làm để tránh sự cố trên danh sách thả xuống không lồng nhau là đổi tên lớp đầu tiên và chỉ sử dụng khi bạn cần nối thêm một lớp lồng nhau.

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

Ví dụ: https://jsfiddle.net/m0sdcn6e/16/

+0

Nó hoạt động tốt Nhưng có điều gì đó sai khi sử dụng phương pháp này. Sự cố của tôi là trình đơn thả xuống không thể cuộn. Làm thế nào để sửa chữa nó? –

+1

Vâng, thật không may, trình đơn thả xuống được sinh ra bên trong nội dung của nó là cha mẹ, do đó, không có cách nào để có thả xuống và cuộn thả xuống với materializecss được nêu ra. Bạn có thể làm gì, trong trường hợp các trình đơn thả xuống có thể cuộn của bạn không có con lồng nhau, hãy đổi tên lớp đầu tiên và chỉ sử dụng khi bạn cần loại lồng nhau. Tôi sẽ thêm một số giải thích cho câu trả lời của mình. – Malork

1

Bây giờ, tôi đã giải quyết vấn đề của tôi. (Trình đơn thả xuống lồng nhau & có thể cuộn trong cùng một nút)

Đây không phải là cách tốt nhất. Đó là một hack, Nhưng hoạt động tốt cho tôi.

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

Các vấn đề liên quan