【发布时间】: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