單擊內部時防止 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          
});