drop-down-menu - Materialise 的下拉菜单不起作用

原文 标签 drop-down-menu materialize dropdown

因此,我采用了两种不同的方法来使用 Materialize CSS 创建下拉菜单(使用他们的文档: https://materializecss.com/navbar.htmlhttps://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">在 head 中,上面代码中的 jQuery 调用就在结束 body 标记之前。

任何帮助将非常感激。

最佳答案

$(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>

关于drop-down-menu - Materialise 的下拉菜单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50475388/

相关文章:

javascript - 设置日期选择器以选择过去的MaterializeCss中的生日

css - 如何在 Bootstrap 模板 Header 中添加水平 Material CardView

php - 从PHP中的另一个表(查询1)插入数据库表(查询2)

php - 使用 php 和数据库选择的下拉框

php - 选择下拉列表后自动填充文本字段

responsive-design - MaterializeCSS 如何使行列高度相同?

image - 在 Bootstrap 中,如何使图像成为下拉菜单?

html - 如何设置 HTML <select> 元素的宽度,而不考虑每个选项的宽度

Javascript根据另一个下拉框值更改下拉框选项

html - 重复的下拉菜单出现在移动设备上,但没有出现在任何其他页面上?