点击Materialize CSS下拉菜单内部时如何阻止菜单自动关闭？

问题根因 #

1. 下拉组件初始化未传入closeOnClick: false配置，框架默认开启点击菜单项自动关闭菜单的逻辑
2. 点击事件绑定代码写在$(document).ready()外部，执行时对应DOM元素还未渲染完成，事件绑定失效
3. 第四个下拉菜单的输入框外层存在冗余的</a>闭合标签，DOM结构异常导致事件冒泡逻辑混乱

修复步骤 #

• 将所有组件初始化、事件绑定逻辑统一放到$(document).ready()回调函数内，保证DOM加载完成后再执行
• 初始化下拉组件时传入配置参数，全局关闭点击自动关闭逻辑
• 删除冗余的错误闭合标签，修复DOM结构
• 如需针对个别可交互元素单独控制，再补充event.stopPropagation()绑定即可

修正后的核心代码片段 #

$(document).ready(function() {
  $('.sidenav').sidenav();
  // 初始化下拉时传入配置，关闭点击自动关闭逻辑
  $(".dropdown-trigger").dropdown({
    closeOnClick: false
  });
  // 绑定下拉内容点击事件，阻止冒泡到外层触发关闭
  $('.dropdown-content').on('click', function(event) {
    event.stopPropagation();
  });
});

如果需要部分下拉保持点击关闭的逻辑，可以单独给不需要自动关闭的下拉加自定义类，选择器只绑定对应类的下拉内容即可。

内容的提问来源于stack exchange，提问作者sanjanaa .p.s