单击里面时防止materializecss下拉菜单关闭？
Posted
技术标签:
【中文标题】单击里面时防止materializecss下拉菜单关闭？【英文标题】：Prevent materializecss dropdown to close when clicking inside it? 【发布时间】：2021-12-26 03:38:11 【问题描述】：不明白如何使用 event.stopPropagation() 函数
Matrialize CSS 有一个默认选项来禁用菜单的自动关闭：closeOnClick: false。这似乎也不起作用。
我尝试过的解决方案：- 遵循这个密切相关的问题中的建议：Prevent materializecss dropdown to close when click inside 我已经尝试过类似的 keydown、keyup 和 keypress 事件。没有任何效果：
代码运行良好。但我无法实现 event.stopPropagation() 或 closeOnClick:false
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<title>select country</title>
</head>
<body>
<div class="navbar-fixed">
<nav class="nav-wrapper indigo">
<div class="container">
<a href="#" class=" right brand-logo">select destination</a>
<a href="#" class="sidenav-trigger" data-target="mobile-links">
<i class="material-icons">menu</i>
</a>
<ul class="left hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1" onclick="stop()">one</a>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
</li>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown2">two</a>
<ul id="dropdown2" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
</li>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown3">three</a>
<ul id="dropdown3" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
</li>
<li><a class="dropdown-trigger" data-target="dropdown4" style="width: 500px;">four</a>
<ul id="dropdown4" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li>
<div class="row">
<div class="input-field col s12">
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<!-- Compiled and minified javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
$(document).ready(function()
$('.sidenav').sidenav();
$(".dropdown-trigger").dropdown();
);
$('.dropdown-trigger + .dropdown-content').on('click', function(event)
event.stopPropagation();
);
</script>
</body>
</html>【问题讨论】：
【参考方案1】：closeOnClick:false
按预期工作：
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
document.addEventListener('DOMContentLoaded', function()
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, closeOnClick:false);
);
Codepen
始终使用latest version 并始终阅读documentation。
【讨论】：
以上是关于单击里面时防止materializecss下拉菜单关闭？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 MaterializeCSS 下拉菜单中创建子菜单？