web-dev-qa-db-ja.com

マテリアライズのドロップダウンメニューが機能しない

そこで、Materialize CSSを使用してドロップダウンメニューを作成する2つの異なる方法に従いました（ドキュメントを使用： https://materializecss.com/navbar.html ＆ https：// materializecss。 com/dropdown.html ）そして私はどちらも動作させることができません。私もここを巡航して同様の問題を見つけましたが、私の問題を完全に解決するものはなかったので、ここに行きます...

Meteor＆Materializeを使用してWebアプリのモバイルメニューを作成しようとしています。これが私のコードの一部です：

<ul id="dropdown" class="dropdown-content">
    <li><a href="#">EMPOWER YOUR BUSINESS!</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<ul class="hide-on-med-and-up">
    <li><a class="dropdown-trigger" data-target="dropdown">
        <i class="material-icons">menu</i></a>
    </li>
</ul>
<script>
    $(document).ready(function(){
        $('.modal').modal();
        $('.dropdown-trigger').dropdown();
    });
</script>

頭に<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">を含めましたが、上記のコードのjQuery呼び出しは、body終了タグの直前にあります。

どんな助けでも大歓迎です。

drop-down-menumaterializedropdown
3
Spencer McLeod

この問題に遭遇したばかりですが、マテリアライズ1.0.0ではjqueryが不要になったため、jsファイルに追加できます。

var dropdowns = document.querySelectorAll('.dropdown-trigger')
for (var i = 0; i < dropdowns.length; i++){
    M.Dropdown.init(dropdowns[i]);
}

上記のコードはグーグルで見つけましたが、マテリアライズドキュメンテーションでは更新されていませんが、それでもjqueryの方法を教えています：

$(document).ready(function(){
   $('.modal').modal();
   $('.dropdown-trigger').dropdown();
});
0
mhermano