防止materializecss下拉菜单在内部点击时关闭

Question

我正在使用Materialize.css进行当前项目，并且我有一个下拉菜单，其中包含一些输入表单。下拉菜单有以下关闭选项：

• 点击.dropdown-content之外的区域
• 点击.dropdown-content内部
• 点击.dropdown-button

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

这里是一个简单的示例。

- Plavookac

---

针对这种类型的操作，您不应该使用下拉菜单。下拉菜单是用于从项目列表中选择一个项目，而不是组成整个表单。更好的替代方案是制作一个按钮，呈现表单模态或根据需要模拟下拉菜单。 - ironicaldiction

这个问题已经在1.0.0版本中得到了修复。在初始化下拉菜单时，您可以指定closeOnClick: false。https://materializecss.com/dropdown.html#options - pmalbu

Answer 1

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

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

我建议在这种情况下避免使用“dropdown”。 但如果您想坚持使用它，请应用上面的代码片段。

- Develoger

---

运行得像冠军一样。 ;) - Animesh Singh

Answer 2

你可以使用例如:

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

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

- César Landesa

---

有没有更一般的选择器？因为我的下拉菜单里有很多元素。我试过用.dropdown-content代替#first_name，但是这样我就无法点击某些按钮了。 - Plavookac

当你说你无法单击它们时，你的意思是什么？我尝试使用.dropdown-content并在你的示例中的第二个<a>上分配id #hi。然后我尝试使用定义了$('#hi').click(function(event){console.log('kkk')});的按钮，它奏效了。 - César Landesa

Answer 3

在下拉菜单初始化时使用此选项：closeOnClick:false。

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

- Hailu