javascript - 单击其内容时 Materialise UI 下拉菜单关闭

Question

我已经基于 Materialise for Wordpress 制作了一个下拉搜索表单:

$('.dropdown-button').dropdown();

.search-area {
  overflow: hidden !important;
  width: 400px !important;
  height: 100%;
  top: 4.2em !important;
}

.search {
  font-size: 16px !important;
  font-weight: 300;
  padding: 0 50px 0 0 !important;
  box-shadow: inset 0 0 10px -1px #e0e0e0 !important;
  cursor: default;
}

.search-header {
  float: left;
}

.search-ico {
  padding: 0px 10px 0 10px;
  background-color: #0063a3;
  margin: -13px 0px 0 0;
}

.input-field input[type="search"]+label {
  right: 1rem;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<a href="#" data-activates="search-area" class="search-header dropdown-button"><i class="material-icons">search</i></a>
<div id="search-area" class="dropdown-content search-area">
  <form method="get" id="searchform" action="/">
    <div class="input-field">
      <input class="search" type="text" name="s" id="s" value="" placeholder="Search..." />
      <label class="label-icon" for="search"><i class="search-ico material-icons">search</i></label>
    </div>
  </form>
</div>

它工作正常并显示搜索区域。我的问题是，当我点击搜索输入字段输入内容时，下拉菜单会淡出，我无法输入任何内容。

我还制作了一个 Codepen这样您就可以看到发生了什么以及我的问题出在哪里。

Answer 1

您可以手动将事件监听器添加到 .dropdown-content 元素，并使用 e.preventDefault() 防止点击冒泡:

$('.dropdown-button').dropdown();

// Add this:
$('.dropdown-content').on('click', function(e) {
  e.stopPropagation();
});

.search-area {
  overflow: hidden !important;
  width: 400px !important;
  height: 100%;
  top: 4.2em !important;
}

.search {
  font-size: 16px !important;
  font-weight: 300;
  padding: 0 50px 0 0 !important;
  box-shadow: inset 0 0 10px -1px #e0e0e0 !important;
  cursor: default;
}

.search-header {
  float: left;
}

.search-ico {
  padding: 0px 10px 0 10px;
  background-color: #0063a3;
  margin: -13px 0px 0 0;
}

.input-field input[type="search"]+label {
  right: 1rem;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<a href="#" data-activates="search-area" class="search-header dropdown-button"><i class="material-icons">search</i></a>
<div id="search-area" class="dropdown-content search-area">
  <form method="get" id="searchform" action="/">
    <div class="input-field">
      <input class="search" type="text" name="s" id="s" value="" placeholder="Search..." />
      <label class="label-icon" for="search"><i class="search-ico material-icons">search</i></label>
    </div>
  </form>
</div>