Materialize下拉菜单点击时配置项不生效问题求助

首先，你的代码里有一个致命的HTML语法错误，这很可能是导致配置不生效的核心原因：

在你的<ul>标签中，class="dropdown-content"的双引号没有闭合，浏览器无法正确解析这个未完成的属性，会直接导致Materialize的JS无法识别下拉菜单容器，进而忽略所有配置参数。正确的写法应该是：

<ul id="management-menu-dropdown" class="dropdown-content">

其次，需要注意Materialize版本的参数命名差异：

• 如果你使用的是Materialize 1.0.0及以上版本，参数名采用驼峰式命名，你代码中的constrain_width需要改为constrainWidth，其他参数belowOrigin、alignment是正确的；
• 如果你使用的是旧版本（如v0.97.x），下划线式的参数命名是没问题的，但依然要先修复HTML的语法错误。

修复后的完整代码示例：

修正后的HTML #

<a class="dropdown-button" href="#" data-activates="management-menu-dropdown"> Management<i class="mdi-navigation-arrow-drop-down right"></i></a>
<ul id="management-menu-dropdown" class="dropdown-content">
  <li><a href="/label_list">Manage labels</a></li>
</ul>

适配新版本的JS初始化代码 #

$(document).ready(function () {
  $('.dropdown-button').dropdown({
    constrainWidth: true,
    hover: false,
    belowOrigin: true,
    alignment: 'right'
  });
});

另外还要确认两个前提：

1. jQuery已经正确引入，且版本符合Materialize的要求；
2. Materialize的JS文件是在jQuery之后引入的（Materialize完全依赖jQuery运行）。

为什么hover模式下配置正常？因为hover触发的逻辑对元素解析的容错性稍高，而点击模式需要JS精准识别下拉容器才能应用配置，所以语法错误会直接导致点击模式失效。

内容的提问来源于stack exchange，提问作者hamed salimian