在里面点击时防止materializecss下拉菜单关闭答案

【问题标题】：Prevent materializecss dropdown to close when clicking inside it在里面点击时防止materializecss下拉菜单关闭
【发布时间】：2016-10-05 08:23:36
【问题描述】：

我正在为当前项目使用 Materialize.css，并且我有下拉菜单，其中包含一些输入表单。

下拉菜单可以选择关闭：

我需要的是在里面点击时不要关闭，因为我需要能够填写输入表单和其他操作。

这里很简单example

【问题讨论】：

您根本不应该对此类操作使用下拉菜单。下拉菜单旨在从项目列表中选择一个项目，而不是组成整个表单。更好的选择是根据需要制作一个显示表单模式或模拟下拉菜单的按钮。
此问题已在 1.0.0 版中得到修复。初始化下拉菜单时，可以指定 closeOnClick: false。 materializecss.com/dropdown.html#options

【解决方案1】：

快速解决方案是在点击内容包装器时停止传播。

$('.dropdown-button + .dropdown-content').on('click', function(event) {
  event.stopPropagation();
});

对于这个特定的用例，我会避免使用“下拉菜单”。但如果你想坚持下去，只需应用上面的 sn-p 即可。

【讨论】：

【解决方案2】：

您可以使用例如：

$('#first_name').click(function (event) {
    event.stopPropagation();
    //Do whatever you want
});

避免由输入first_name 生成的事件传播。下拉菜单不会检测到它，因此它不会被关闭。

【讨论】：

还有什么更通用的吗？：/因为我在下拉列表中有很多元素。我尝试输入.dropdown-content 而不是#first_name，但是我根本无法点击某些按钮。
你说不能点击它们是什么意思？我尝试使用 .dropdown-content 并将 ID #hi 分配给您的示例中的第二个 <a>。然后我尝试按下定义了$('#hi').click(function (event) { console.log('kkk') }); 的按钮，它起作用了。

【解决方案3】：

在下拉初始化时使用此“closeOnClick：false”

$(".dropdown-trigger").dropdown({
    closeOnClick : false          
});

【讨论】：