材料化选择双击切换
我正在使用MaterializeCSS创建一个选择下拉菜单。在Mac笔记本电脑上,下拉菜单运行良好(在Safari和Firefox上进行了测试,在IE和Chrome上通过Browserling.com进行了测试)。然而,当我在Windows电脑(IE和Chrome)上浏览网站时,我总是必须双击才能切换下拉菜单。我不明白为什么会发生这个问题。如果有人能指出以下代码的具体问题,我将不胜感激:
<div class="dropdown-div">
<div class="input-field">
<select>
<option value="1" class="dropdown-text"><a class="dropdown-text-default" data-url="#General">General</a></option>
<option value="2"><a class="dropdown-text" data-url="#Option1">Option1</a></option>
<option value="3"><a class="dropdown-text" data-url="#Option2">Option2</a></option>
<option value="4"><a class="dropdown-text" data-url="#Option3">Option3</a></option>
<option value="5"><a class="dropdown-text" data-url="#Option4">Option4</a></option>
</select>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
请从MaterializeCSShere查找文档。
解决方案
这是Chrome73中的回归错误。 若要解决此问题,请使用以下代码:(这是我能找到的唯一解决方案。)
$('select').material_select();
document.querySelectorAll('.select-wrapper').forEach(t => t.addEventListener('click', e=>e.stopPropagation()))
相关文章