【问题标题】:Problems with dropdown in Materialize 1.0.0-rc.2Materialize 1.0.0-rc.2 中的下拉菜单问题
【发布时间】:2018-08-23 16:43:13
【问题描述】:

当任何下拉菜单打开并且我单击输入时,下拉菜单会关闭并且输入焦点会消失。我无法理解是什么问题,请帮助。有人遇到过这种情况吗?

$('select').formSelect();
$('.dropdown-trigger').dropdown();
body {
  position: relative;
  padding: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<div class="row">

  <div class="input-field col s4">
    <input id="last_name" type="text" class="validate">
    <label for="last_name">Last Name</label>
  </div> 

  <div class="input-field col s4">
    <select>
      <option value="" selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>
  
  <div class="col s4">
     <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
  <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>
</div>
</div>
</div>

【问题讨论】:

  • 嗨,欢迎来到 SO。我看到您发布了一个codepen链接:当您想发布可以由浏览器呈现的HTML、JS和/或CSS时,您可以使用code sn-ps。这样,用户无需离开 Stack Overflow 即可查看输出。我已经建议了一个可以为你实现的编辑;)
  • @FedericoGrandi 谢谢:)

标签: javascript html focus dropdown materialize


【解决方案1】:

解决了一个问题。我在库中评论了这一行

if (this.options.autoFocus) {
  this.el.focus();
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-08-05
    • 1970-01-01
    • 2012-12-20
    • 2020-12-29
    • 1970-01-01
    相关资源
    最近更新 更多