Bootstrap的.dropdown（'toggle'）工作得很好：下拉菜单不可用

Question

我有一个包含文本区域的下拉菜单。在文本区域上按回车键时，我想关闭下拉菜单。这就是以下内容：

$(document).ready(function(){
  $('#edit').keypress(function(e) {
    var KeyEnter = 13;
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode == KeyEnter) {
      $('#menu').dropdown('toggle');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown" id="menu">
  <button class="w-75 text-left btn btn-light dropdown-menu-toggle dropdown-toggle" type="button" data-toggle="dropdown" data-default-label="localhost:8080" aria-expanded="true">
    <code class="dropdown-toggle-text is-default" id="server">localhost:8080</code>
  </button>
  <div class="dropdown-menu dropdown-select w-75">
    <div class="dropdown-input">
      <input type="search" id="edit" class="dropdown-input-field form-control">
    </div>
    <div class="dropdown-content" id="list">
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><code>localhost:8080</code></a>
      <a class="dropdown-item" href="#"><code>172.17.0.2:8080</code></a></div>
  </div>
</div>

问题是，一旦使用.dropdown('toggle')关闭了下拉菜单，用户就无法再使用该文本区域：单击该文本区域以使其成为焦点时，该下拉菜单将关闭。

该如何解决？

---

如何重现错误

1. 单击标记为localhost:8080的下拉按钮；下拉菜单打开。
2. 单击空白文本区域；它得到关注。
3. 按键盘的Return键；下拉菜单关闭。
4. 重复＃1。 （单击标记为localhost:8080的下拉按钮；下拉菜单打开。）
5. 重复＃2。 （单击空白文本区域；它将获得焦点。）

观察到的行为

下拉菜单关闭。

预期行为

下拉菜单保持打开状态，＃5之后的状态与＃2之后的状态相同。

Answer 1

您的代码存在的问题是，来自该字段的click事件正在冒泡到父级。点击下拉事件，然后点击。解决方案是阻止这些点击传播到树上。

$("#edit").click(function(e){
    e.stopPropagation();
}).keypress(function(e) {
    // ... your code
});

请注意，代替return false;的{​​{1}}也会像被调用e.stopPropagation();一样，将来可能会引起其他问题。