javascript - 如何在用户单击外部时隐藏下拉菜单

Question

下面是我正在使用的输入下拉列表的简化版本。

它所做的一个基本总结是:如果您专注于输入，则会出现一个下拉菜单。如果您单击下拉列表中的一个选项，该选项会填充输入并且下拉列表会消失。这是使用 onfocus 和我称为 dropdown(); 和 undropdown(); 的函数实现的。

我进退两难，当有人点击其他地方时，我无法让下拉菜单消失。如果我使用 onblur，它会成功隐藏下拉菜单，但如果您单击一个选项，它不会填充输入，这是因为，onblur 函数首先运行，然后，因此，input(); 函数不会运行，因为下拉列表已经隐藏。

如果您将 onclick 放在 body 标签或其他父标签上，它会将 onfocus 视为一次点击，它运行的是 dropdown(); 函数，然后 undropdown(); 函数立即起作用，因此下拉列表永远不会出现，因为函数重叠。

如果您能帮助我弄清楚如何对函数进行排序，以便它们以正确的顺序执行而不会相互重叠，我将不胜感激。

JSFiddle 可用 here.

function input(pos) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");
  document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
  undropdown(0);
}
function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "block"
}
function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display = "none";
}

.drop {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}
.content {
  display: none;
  list-style-type: none;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 190px;
  overflow-y: scroll;
}
.content li {
  padding: 12px 16px;
  display: block;
  margin: 0;
}

<div class="drop">
  <input type="text" name="class" placeholder="Class" onfocus="dropdown(0)"/>
  <ul class="content">
    <li onclick="input(0)">Option 1</li>
    <li onclick="input(1)">Option 2</li>
    <li onclick="input(2)">Option 3</li>
    <li onclick="input(3)">Option 4</li>
  </ul>
</div>

PS:除上述问题外，我将不胜感激有关编辑的建议，以便为该问题获得更好的标题，以便遇到类似问题的人可以更容易地找到它。

Answer 1

在这种情况下，在 onblur 上，您可以调用一个函数，它会在非常小的 setTimeout 之后几乎立即触发 undropdown(0);。像这样:

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

HTML

<input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />

不需要其他更改。

function input(pos) {
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");

  document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
  undropdown(0);
}

function dropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display= "block"
}

function undropdown(pos) {
  document.getElementsByClassName('content')[pos].style.display= "none";
}

function set() {
  setTimeout(function(){ 
    undropdown(0);
  }, 100);
}

        .drop {
            position: relative;
            display: inline-block;
            vertical-align:top;
            overflow: visible;
        }

        .content {
            display: none;
            list-style-type: none;
            border: 1px solid #000; 
            padding: 0;
            margin: 0;
            position: absolute;
            z-index: 2;
            width: 100%;
            max-height: 190px;
            overflow-y: scroll;
        }

        .content li {
            padding: 12px 16px;
            display: block;
            margin: 0;
        }

   <div class="drop">
        <input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />
        <ul class="content">
            <li onclick="input(0)">Option 1</li>
            <li onclick="input(1)">Option 2</li>
            <li onclick="input(2)">Option 3</li>
            <li onclick="input(3)">Option 4</li>
        </ul>
    </div>