单击内部时防止 materializecss 下拉列表关闭

Question

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

下拉菜单有关闭选项：

• 在.dropdown-content之外点击
• 单击.dropdown-content内部
• 点击.dropdown-button

我需要的是点击它内部时不要关闭，因为我需要能够填写输入 forms 和其他操作。

这是一个简单的例子

Answer 1

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

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

对于这个特殊的用例，我会避免使用“下拉列表”。 但如果您想坚持下去，只需应用上面的代码段即可。

Answer 2

您可以使用例如：

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

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

Answer 3

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

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