Materialise 的下拉菜单不起作用

Question

因此，我按照两种不同的方式使用 Materialize CSS（使用他们的文档：https://materializecss.com/navbar.html & https://materializecss.com/dropdown.html）创建下拉菜单，但我都无法正常工作。我也浏览过这里并发现了类似的问题，但 none 似乎很好地解决了我的问题，所以这里是...

我正在尝试使用 Meteor & Materialize 为网络应用制作移动菜单。这是我的一些代码：

<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 标记之前。

如有任何帮助，我们将不胜感激。

Answer 1

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

.dropdown-content{
   width: max-content !important;
   height:auto !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<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="dds">
    <li><a class="dropdown-trigger" data-target="dropdown">
        Dropdown <i class="material-icons">arrow_drop_down</i></a>
    </li>
</ul>

Answer 2

刚刚偶然发现这个问题，materialize 1.0.0 不再需要 jquery 所以你可以在你的 js 文件中添加：

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

上面的代码是我在 google 上找到的，但是在 materialize 文档中它没有更新它仍然教你 jquery 方式：

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

Answer 3

我使用“.dropdown-button”class 代替“.dropdown-trigger”，使用 data-activates 属性代替 data-target，它对我有用！

Answer 4

在您的 js 中使用它（它对我有用）。我已从 laravel 控制器加载下拉菜单 HTML。

$(document).on('focus','.dropdown-trigger',function(){
    $('.dropdown-trigger').dropdown();
});

Materialise 的下拉菜单不起作用

Dropdown Menu for Materialize not working

materialize

drop-down-menu

dropdown