如何用MaterializeCSS创建多个下拉菜单？
MaterializeCSS是一个现代化的响应式前端框架，它提供了丰富的组件和样式，可以帮助开发者快速构建漂亮的用户界面。下面是使用MaterializeCSS创建多个下拉菜单的步骤：
- 引入MaterializeCSS的CSS和JavaScript文件到你的HTML页面中。你可以从官方网站（https://materializecss.com/）下载最新版本的文件，或者使用CDN链接。
- 在HTML页面中创建一个包含下拉菜单的容器元素，例如一个
<div>元素。 - 在容器元素中添加一个触发下拉菜单的按钮，可以是一个
<button>或者<a>元素。给按钮添加一个唯一的ID，例如dropdown-button。 - 在按钮元素的
data-target属性中指定一个唯一的ID，用于关联下拉菜单的内容。例如，data-target="dropdown-menu"。 - 在容器元素中创建一个下拉菜单的内容，可以使用
<ul>和<li>元素来创建菜单项。给下拉菜单的内容添加一个唯一的ID，例如dropdown-menu。 - 使用JavaScript初始化下拉菜单。在页面加载完成后，使用以下代码初始化下拉菜单：
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});- 根据需要，可以使用MaterializeCSS提供的各种选项和样式来自定义下拉菜单的外观和行为。例如，可以添加图标、调整菜单的位置、设置菜单的宽度等。
下面是一个示例代码，演示了如何使用MaterializeCSS创建多个下拉菜单：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<a class="dropdown-trigger btn" href="#" data-target="dropdown1">下拉菜单1</a>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">菜单项1</a></li>
<li><a href="#!">菜单项2</a></li>
<li><a href="#!">菜单项3</a></li>
</ul>
<a class="dropdown-trigger btn" href="#" data-target="dropdown2">下拉菜单2</a>
<ul id="dropdown2" class="dropdown-content">
<li><a href="#!">菜单项4</a></li>
<li><a href="#!">菜单项5</a></li>
<li><a href="#!">菜单项6</a></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
</script>
</body>
</html>这个示例中创建了两个下拉菜单，分别使用了dropdown1和dropdown2作为唯一的ID。你可以根据需要添加更多的下拉菜单，只需要复制相应的代码块并修改ID和菜单项即可。
推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云对象存储（https://cloud.tencent.com/product/cos）。
相关·内容
我正在使用materializecss。我用的是sidenav。我遇到的问题是: 1.当菜单项超过屏幕高度时，菜单项被隐藏。2.下拉菜单也是如此。你知道怎么让它工作吗？
浏览 16提问于2017-08-14得票数 0
3回答
物料选择双击切换
、、、
我正在使用MaterializeCSS创建一个选择“下拉”菜单。在Mac笔记本电脑上，下拉菜单运行良好(通过browserling.com在Safari和FireFox中测试，在IE和Chrome中测试)。然而，当我从Windows电脑(IE和Chrome)浏览网站时，我总是必须双击才能切换下拉菜单。我不明白为什么会发生这个问题。如果任何人能指出以下代码的具体问题，我将不胜感激： <div class="dropdown-div">
<div class="input-field">
<select>
浏览 10提问于2019-05-01得票数 3
1回答
我是新的聚合物，我试图创建一个paper-card‘列表’，这是动态的。前提是，“用户从下拉菜单、开始时间和结束时间中选择一周中的一天，当按下”加号“按钮创建新行时，下拉菜单现在不包括已经使用的一周中的一天。”我的布局是半工作的，但我似乎不知道如何用add按钮处理每个当前/新行。
浏览 1提问于2017-05-23得票数 0
回答已采纳
我正在使用MaterializeCSS 的下拉菜单，但我希望该菜单是向上打开的，而不是向下打开的。我可以通过选项来做这件事吗，或者我将不得不直接在框架中更改一些东西？我尝试在选项和其他选项中使用栏沟，但它不起作用。
浏览 0提问于2016-08-03得票数 2
如何使用MaterializeCSS和JavaScript生成n个下拉菜单？我尝试创建一个下拉列表结构，并让所有按钮都触发该下拉列表，但当我单击其中任何一个按钮时，都没有任何反应。 <div id="button-container">
</div>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a
浏览 14提问于2020-04-11得票数 0
我已经使用MaterializeCSS (https://materializecss.com)构建了一个“纯超文本标记语言”模板。 在模板内部，我有一个下拉菜单，它在单击事件后按预期显示。我的代码如下： <header>
<!-- Dropdown sub-menu -->
<ul id="dropdown-menu-profile" class="dropdown-content">
<li><a href="#"><i class="material-icons
浏览 12提问于2020-09-03得票数 0
1回答
使用PHP下拉菜单
、、、
function.php
function getCategories($id = null) {
$categoried = array();
$query = mysql_query("SELECT id,name FROM `categories`");
while ($row = mysql_fetch_assoc($query) ) {
$categories [] = $row;
}
dropdown.php
...
<select name="
浏览 3提问于2015-03-28得票数 0
回答已采纳
我正在用Angular构建web应用。我一直在和之间来回奔波。总的来说，我更喜欢和一起使用的Materializecss。遗憾的是，Materializecss还没有实现网格列表，我想知道如果我使用Materializecss和Angular，如何实现它们？理想情况下，我正在寻找一个不使用JQuery的解决方案。
浏览 15提问于2017-08-11得票数 1
回答已采纳
我正在开发一个使用Laravel + Svelte + materializecss的产品。
我使用Svelte组件作为自定义标记，使用svelte: options。
示例：<svelte: options tag = "custom-tag" />
如果试图在此组件中加载materializecss，则必须每次在组件中运行import。父HTML调用materializecss。
为什么会这样呢？如果你能告诉我，我会很感激的。
index.blade.php
<html>
<head>
<!-- ↓ materializec
浏览 7提问于2020-10-21得票数 0
回答已采纳
2回答
我试图在MaterializeCSS网站中创建一些类似于这个图形的图形，但我找不出它来自哪里，我查看了整个MaterializeCSS网站，它不是框架的一部分，我在代码中找不到他们使用的是什么 我对那些小盒子特别感兴趣：(https://ibb.co/7vZVjZ8) Small square graphics 示例网站可在此处找到：https://themes.materializecss.com/pages/admin-dashboard.html
浏览 18提问于2020-07-24得票数 3
回答已采纳
我使用materializecss来悬停一个按钮，以获得下拉菜单。但我无法实现这一点使用阿尔法-1版本。
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content
浏览 1提问于2018-02-13得票数 1
回答已采纳
2回答
根据CAVT的介绍，它可以在一个任务中创建多个作业，但我找不到任何用于创建更多作业的按钮，我该如何做？
浏览 0提问于2020-03-06得票数 7
我正在编写一个React教程，它使用Materialize 1.0.0
旧代码直接从实质性css包导入css和js文件，如下所示：
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css/dist/js/materialize.min.js';
我卸载了materialize-css包，并安装了@materializecss/materialize，这是Materialize的下一个版本。按照旧的逻辑，我试图导入scc和js文件，如下所示：
imp
浏览 7提问于2021-12-07得票数 0
我在我的项目中使用了MaterializeCSS。我想做一个带下拉菜单的按钮。当我单击按钮时，下拉菜单没有显示在正确的位置:它显示在表格的开始处，而不是按钮触发器的下方或顶部。
这里有一个重现这个问题的方法：
<table>
<thead>
<tr>
<th>More</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="dropdown-button" href="#!" data-acti
浏览 0提问于2018-03-11得票数 0
5回答
使用PHP更新部分网页
、、、
我正在使用PHP创建我的上座率网页，当用户进入时，他得到了当月的服务。用户可以使用下拉菜单更改这个月，这会刷新整个页面.我只希望刷新表，而不是重新加载整个页面。
有谁能告诉我如何用PHP来完成这个任务吗？
浏览 1提问于2013-11-15得票数 0
回答已采纳
我正在尝试使用一个简单的PHP数组($keysArray)来初始化。我使用json_encode将PHP数组转换为Javascript，但由于某些原因，下面的转换不起作用。autocomplete下拉菜单根本不会出现--它只在我直接输入按键时才起作用，就像'Initialisation‘下的MaterializeCSS链接中的例子一样。
var tempArray = <?php echo json_encode($keysArray); ?>;
const ac = document.querySelector('.autocomplete');
M.
浏览 0提问于2019-01-25得票数 1
1回答
如何用图像在C#中创建运动？现在我正在制作一个蛇游戏。蛇由头部、身体和尾巴三部分组成。如何将三部分连接起来，使运动窒息？非常感谢
浏览 1提问于2015-05-30得票数 1
回答已采纳
1回答
我正在开发一个前端使用Materializecss和AngularJS的web应用程序，我的问题是，Materializecss的下拉菜单组件对我不起作用。
下面是他们网站上的示例下拉列表
$( document ).ready(function(){
$(".dropdown-button").dropdown();
});
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a hr
浏览 3提问于2015-04-29得票数 4
回答已采纳
3回答
我已经通过npm安装了MaterializeCSS。但我不知道如何使用MaterializeCSS。我在用webpack。
有人能为支持推荐一个教程或什么吗？
仅仅使用引导或者直接跳入MaterializeCSS是好的吗？
浏览 8提问于2016-07-04得票数 0
我不太确定我是否能用MaterializeCSS框架实现我心中的目标。但如果可能的话，我想看看是否有人能帮我。
作为参考，我正在用laravel 5.6工作。也许这有助于更快地找到解决方案。
所以，我有一个下拉菜单。但我不想掉下来，我只想有标签。正如在中所看到的。
有两件事需要改变。
该选项卡需要更改对菜单项的单击。我不知道这将如何和能否奏效。
该选项卡需要在单击时重定向到页面。而不加载内部(页面上)内容。
我有办法做到这一点吗？
浏览 0提问于2018-08-07得票数 0
回答已采纳
我试图在Django中创建一个HTML表单，并且我使用来完成这个任务。在我的models.py文件中，我使用的是"ForeignKey"，它将被转换成带有选项的下拉菜单。这很管用，我在我的视野中看到了一次跌落。
models.py
class plants(models.Model):
name = models.CharField(max_length=300, blank=True)
active_account = models.ForeignKey('accounts')
class Meta:
unique_t
浏览 6提问于2016-01-07得票数 0
回答已采纳
当在屏幕的下端显示更大的列表时，物化CSS自动完成将在向上的位置打开，问题是，带有闪烁光标的文本输入区域被覆盖，用户不知道他可以输入。
( 1)你怎么能强迫它总是往下走？或者，当它决定在向上的位置打开时，你如何告诉它在不覆盖输入区域的情况下打开它？这些解决方案的乙醚将是可以的。
我找到的最接近的解决方案是 (用于下拉菜单)和，但是在我看来，这些解决方案就像我不熟悉的jQuery，并且需要一个普通的JavaScript解决方案。
我通过CDN使用MaterializeCSS版本1.0.0。
图片：和
浏览 2提问于2019-12-09得票数 0
回答已采纳
我正在创建自己的基于vue.js和materializecss的自动补全功能。
现在它工作得很好，除了几件事。
自动完成的正常行为是，一旦您通过按enter键或单击来选择一个项目，输入的值就会成为您选择的项目。因此，如果您输入"alab"，并选择“Alabama”项，则输入的值应变为"Alabama"，并且下拉列表将消失。
问题是输入绑定了v-model="query"，这意味着输入的值是"query“的值，”query“是输入值。
尝试使用this.$el.querySelector('input').value =
浏览 1提问于2017-03-25得票数 1
我使用MaterializeCSS框架只花了几个小时，我发现了一些我认为我不理解的代码，文档中可能没有解释，您能向我解释一下getInstance ()方法的功能吗？
let elems = document.querySelectorAll(".sidenav");
M.Sidenav.getInstance(elems).close();
M.Sidenav.init(elems);
浏览 1提问于2020-06-23得票数 1
回答已采纳
我使用的是一个建在MaterializeCSS上的库ngx-物化，我试图构建一个导航栏：
使用一个物化CSS的预置颜色类：
<mz-navbar class="blue-grey darken-3">
<a href="/" class="brand-logo center">
LOGO
</a>
</mz-navbar>
这不起作用，因为呈现的父元素的颜色仍然是"red"：
我试过用这样的div包装它：
<mz-navbar>
<div class=&
浏览 0提问于2018-12-11得票数 1
回答已采纳
1回答
我使用react组件创建了下拉菜单。守则如下：
<Select
style={{ width: 300 }}
options={people}
onChange={this.choosePerson}
placeholder="Select person">
</Select>
person对象如下：
const people = [];
people.push({
label: 'John'
value: 'John'
});
people.push({
label: '
浏览 0提问于2020-08-11得票数 0
回答已采纳
1回答
粘性导航栏需要占用空间
、、、、
我正在尝试创建一个带有MaterializeCSS图钉插件的固定导航栏。到目前为止，它工作得很好，尽管当它捕捉到页面顶部(=获取位置:固定状态)时，页面内容会被推到导航栏下。
当然，我可以在我的内容上使用边距，但是当导航栏没有固定时，内容也会有这个边距。
有关示例，请查看。
我怎样才能使用MaterializeCSS图钉插件，而不会在每次被钉住的时候内容都掉出来？
浏览 16提问于2016-08-22得票数 2
所有人！
我想问如何创建一个关闭按钮(x)，可以用于卡或卡面板在MaterializeCSS。引导程序有一个警报组件，不幸的是，MaterializeCSS没有。
有办法吗？
My Alert (卡片面板)
这就是我想要做的。(我在某个地方看到了这个，但代码不是免费的)。
非常感谢您的意见、建议和帮助。
注意：我不能发布这个图片，因为我没有至少10个声誉。谢谢。
浏览 4提问于2016-10-28得票数 1
回答已采纳
1回答
我在一个视图中有几个字段，当另一个字段被悬停时，我想以下拉的形式出现。可以在视图中创建跳转菜单和场集，但是如何创建下拉菜单呢？我尝试过使用块参考模块，但这似乎没有显示在视图中。我唯一能想到的其他选择是在全局视图字段中编写HTML并使用替换模式，但必须有更好的方法。这是如何做到的呢？
浏览 0提问于2014-07-22得票数 0
我正在使用code found 创建一个下拉菜单，用户可以从中选择多个选项。
如何更改此代码，使其最多只能选择3个选项？这可以通过只编辑HTML来完成吗？
浏览 0提问于2016-05-19得票数 0
1回答
如标题所述，动态加载materializecss时，波纹效应不起作用。chrome工具告诉我们，下面两个HTML生成相同的DOM树。
我的动态导入materializecss的实现有问题吗？
下面是两段可重复的HTML代码(您可以在上试用它们)：
工作示例(单击并保持按钮显示正确的纹波效应)：
<!DOCTYPE html>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/css/mate
浏览 3提问于2021-08-20得票数 0
正在想办法使用Html.DropDownList的扩展方法，但不知道如何用它做枚举。
比方说，有这样一串代码：
public enum ItemTypes
{
Movie = 1,
Game = 2,
Book = 3
}
如何使用Html.DropDownList扩展方法去创建这些值的下拉菜单？
或者，最好只是简单地创建一个for循环并手动创建Html元素？
浏览 618提问于2017-12-22
我想在我的chrome扩展中使用materializecss。该扩展为gmail添加了一些功能。不幸的是，materializecss似乎干扰了gmail的样式。是否可以隔离materialize css的作用域，或者为类添加自定义前缀？
我当前在我的manifest.json中导入css
"content_scripts": [
{
"matches": ["*://mail.google.com/*"],
"css": [
"vendor/materializecss/m
浏览 0提问于2017-05-23得票数 2
3回答
编辑:我找到了解决方案。请看我在页面底部的帖子。
我用物质化为joomla创建了一个模板。一切正常工作，除了滑块(显示为灰色矩形)和旋转木马，它只是一个又一个地显示图像作为过时的div。
旋转木马：
滑块：
我在materializecss之前导入了jquery脚本。我还调用了carousel.carousel()。我使用的滑块和旋转木马的代码与Materializecss网站上的示例相同。有人能帮忙吗？
浏览 9提问于2016-03-21得票数 1
回答已采纳
1回答
我用MaterializeCSS创建了一个简单的文本框。它有一个字符计数器，类似于这里可以找到的- 。
在玩它的时候，我发现文本框有524288个字符的限制。您可以使用给定链接中的字符反例来自己尝试。
我的问题是:为什么会这样？默认情况下，不应该将最大长度设置为“无限”吗？还是与使用MaterializeCSS有关？
浏览 6提问于2016-03-04得票数 3
回答已采纳
我正在从db表中获取用户记录，如下所示
<?php $row=1; ?>
<select id="status<?php echo $row; ?>" name="status<?php echo $row; ?>">
<option value="0">Active</option>
<option value="1">Block</option>
</select>
<?php $row++; ?&
浏览 0提问于2011-01-16得票数 0
回答已采纳
我想为selenium测试创建一个框架。它应该是一个UI驱动的web框架，任何用户都可以通过从下拉菜单中选择要测试的模块并单击' test‘按钮来测试AUT。给出一些这样的框架是如何发展起来的。首选语言是Java
浏览 1提问于2016-02-11得票数 0
回答已采纳
如何用这种逻辑来制作菜单呢？什么是逻辑？这次我用了ExpandableListview，它把它们都做成下拉菜单，我和回收商一起试过，但是我不能把下拉菜单变成它的一部分。我该用什么？
浏览 4提问于2022-01-30得票数 0
我喜欢将Toast从Materializecss集成到SVG中。我可以从Materializecss导入css和js，但是当我加载svg时，我得到的是Uncaught TypeError: Cannot use 'in' operator to search for 'touchAction' in null
示例：
有没有办法让这件事起作用呢？
浏览 0提问于2015-04-21得票数 0
1回答
为了处理Netty(4.0.34)中的任何用户生成的事件，我们在ChannelHandlerContext上使用了ChannelHandlerContext。
在调用fireUserEventTriggered方法时，调用管道中下一个处理程序的userEventTriggered(final ChannelHandlerContext ctx, final Object evt)，然后在其中处理生成的事件。
但是，在下一个处理程序的userEventTriggered方法中，我无法访问存储在透水处理程序中的AttributeMap。netty是否为用户事件创建了新的上下文？
浏览 3提问于2016-04-04得票数 1
回答已采纳
1回答
我在单页上有多个下拉菜单。我正在使用Materializecss.com。错误是，在整个页面中的每个下拉菜单中，我都得到了第一个下拉菜单的值。这是密码。
@if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser'><i class="material-icons left">exp
浏览 7提问于2017-07-18得票数 0
container的默认宽度是MaterializeCSS中的
容器类不是网格的严格组成部分，但在布局内容方面很重要。它允许您对页面内容进行中心设置。容器类设置为窗口宽度的70%。它帮助您中心和包含您的页面内容。我们使用容器来包含我们的身体内容。
这怎么能改变呢？
浏览 3提问于2016-09-17得票数 9
回答已采纳
1回答
带有jquery的图像弹出框
、、、、
我创建了一个下拉菜单，它可以容纳不同的城市。现在，我希望能够选择一个城市和一个城市的形象应该出现在弹出框。我有一个网站，持有每个城市的形象和网址只是略有不同的彼此。有人知道如何用jquery编写函数吗？谢谢你的每一个回答:)
浏览 3提问于2013-09-06得票数 0
回答已采纳
我正在尝试使用Materializecss 100和Materializecss JS创建一个可折叠的。当像这样创建我的可折叠组件并单击它时，它会立即打开和关闭
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
&
浏览 0提问于2018-03-07得票数 0
2回答
如何用javascript实现一个下拉菜单里面的复选框，让你每次点击菜单时都能改变情况？
浏览 2提问于2012-09-02得票数 0
回答已采纳
我是MaterializeCSS和jQuery的新手，我一直不明白为什么belowOrigin不能在这个下拉菜单上工作。我不确定这是否与菜单li的设置有关，但我见过下拉按钮工作的例子，但没有一个是下拉触发器的。任何关于如何让它正常工作的洞察力或清晰度都将是很好的。谢谢
HTML：
<nav class="navbar-fixed">
<div class="nav-wrapper" id="nav">
<a href="#" class="brand-logo c
浏览 24提问于2018-07-28得票数 6
回答已采纳
1回答
Update:只需从字典中返回一个键，该字典由web服务创建，并传递回我的程序WPF，然后将字典填充到包含以下值的下拉列表中
IT_ED
IT_FS
IT_BUS
所分配的密钥如下
Key Value
[1] IT_ED
[2] IT_FS
[3] IT_BUS
我需要值中的键，基于下拉菜单中选择的项。
我用来存放钥匙的字典
private Dictionary<int, string> _DivisionDict = new Dictionary<int, string>();
private Dictionary<int, string> Divis
浏览 1提问于2012-04-12得票数 0
回答已采纳
2回答
Yii2和物化CSS
、、、
我已经浏览了互联网和这个网站，但是，我没有找到我的问题的答案。我已经通过这个网站上提到的composer安装了Materializecss：
我在/vendor目录中有一个macgyer文件夹。我正在使用高级模板。
然后，我使用以下代码在目录/frontend/assets/中创建了一个名为MaterializeAsset.php的资产文件
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* Main frontend application asset bundle.
*/
class MaterializeAsset
浏览 0提问于2018-11-04得票数 0
我不能只使用HTML显示来自MaterializeCSS的字符计数器。该网站示例在jQuery中实现。我不能在我的React项目中使用jQuery，所以我想知道是否有一种方法可以通过使用MaterializeCSS的JS来插入一个带有字符计数的materializeCSS文本区域？有一个可行的日期选择器在materializeCSS的JS下面作为一个例子，非常感谢！
< script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"
浏览 0提问于2018-04-10得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
