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

Question

我正在为当前项目使用 Materialize.css，我有下拉菜单，里面有一些输入表单。

下拉菜单有关闭选项：

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

这里很简单example

Answer 1

您可以使用例如：

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

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

Answer 2

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

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

我会避免在这个特定的用例中使用 'dropdown'。但如果你想坚持下去，只需应用上面的代码片段即可。

Answer 3

在下拉菜单初始化时使用这个“closeOnClick : false”

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

Prevent materializecss dropdown to close when clicking inside it