マテリアライズのネストされたドロップダウン

Question

マテリアライズのネストされたドロップダウンを作成できますか？ 2番目のドロップダウンは

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

ネスティングこのdoesntの仕事のように右側にする必要があります。何か案は？アルバートM.

Answer 1

おかげで、私はこれを解決するために自分を見て、そして開いてトローリングAM /私はhereが、彼らはあなたがかもしれない

Answer 2

を言うことがわかりGithubの上で問題を閉じましたドロップダウンボタン機能を使用するのではなく、<collapsible>アコーディオン機能を使用すると、好みのものを得ることができます。

http://materializecss.com/collapsible.html

Answer 3

それは最善の解決策ではないのですが、それは私が得たものである：

ちょうどあなたのCSSファイルに以下を追加：私は取得するために使用しているものです

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

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

Materializecssフレームワークのネストされたドロップダウンはネイティブではまだ実装されていないためです。

例：https://jsfiddle.net/m0sdcn6e/15/

UPDATE：残念ながら、その方法に問題がある

。定義によって、overflow（xまたはy）プロパティは、何かがサイズを超えたときにコンテナに何が起こるかを制御します。 overflow-yのデフォルト値はautoです。たとえば、ドロップダウンのサイズを超えたものがあれば、スクロール可能になります。

Materializecssは、デフォルトではその親の内部のドロップダウンの内容を生成しますので、我々はoverflow-yvisibleをオンにしない場合は、ネストされたドロップダウンが表示されなくなります。しかし、この方法では、ネストされたドロップダウンがうまく機能しますが、これらのドロップダウンはスクロールできなくなります。

ネストされていないドロップダウンの問題を回避するためにできることは、ファーストクラスの名前を変更し、ネストしたものを追加する必要がある場合にのみ使用します。

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

例：https://jsfiddle.net/m0sdcn6e/16/

Answer 4

今、私は私の問題を解決しました。 （ネストされたドロップダウン&は同じボタンでスクロール可能）

これは最善の方法ではありません。それはハックですが、私にとってはうまくいきます。

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