材料化选择双击切换

沃梦达教程前端问题

2022-01-01 8

Materializecss select double click to toggle(材料化选择双击切换)

本文介绍了材料化选择双击切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用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="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvbWF0ZXJpYWxpemUvMC45OS4wL2pzL21hdGVyaWFsaXplLm1pbi5qcw=="></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()))

这篇关于材料化选择双击切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：材料化选择双击切换

上一篇：属性&#39；相册&#39；不存在于类型&#39；对象&#39；上的角度

下一篇：材质化CSS-不同高度的网格布局

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX