Question

我正在尝试使用仅使用CSS / HTML的下拉建议来实现搜索框。它显示正常但我无法在点击下拉元素时触发onclick事件并且链接也不起作用。如果我不隐藏列表，那么它可以正常工作，但是当隐藏然后使用＆＃34;：focus＆＃34;输入框的选择器不再对点击作出反应。

知道怎么解决这个问题吗？这是隐藏元素的正常行为吗？

它基于this example，似乎也无法在那里工作。

重现问题的一个简单例子：

HTML：

<html>
  <head>
    <link rel="stylesheet" href="test.css" />
  </head>
    <input class="inputfield" type="text" placeholder="SEARCH...">
    <ul class="search-results">
      <li class="typeahead" onclick="console.log('test')">
        <a class="center" href="/test" >test</a>
      </li>
      <li class="typeahead" onclick="console.log('test')">
        <a class="center" href="/test" >test</a>
      </li>
      <li class="typeahead" onclick="console.log('test')">
        <a class="center" href="/test" >test</a>
      </li>
      <li class="typeahead" onclick="console.log('test')">
        <a class="center" href="/test" >test</a>
     </li>
   </ul>
</html>

CSS：

input{
  width: 300px;
  height: 26px;
  padding-left: 10px;
  border: 1px solid lightgrey;
  outline: none;
}

ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
  visibility: hidden;
}

input:focus + ul{
  visibility: visible;
}


li{
  border: 1px solid lightgrey;
  border-top-style: none;
  width: 300px;
  height: 25px;
  padding-left: 10px;
  background: #fff;
  cursor: pointer;
}

li:hover{
  background-color: lightgrey;
}

li:hover a{
  color: white;
}

a{
  color: black;
  font-size: 12px;
  display: block;
  text-decoration: none;
}

Answer 1

问题是触发器，焦点，模糊和点击的顺序;

'搜索结果'在输入聚焦时可见，因此在输入未聚焦时隐藏。当您点击“li”时，输入会失去焦点，并且在触发点击事件之前，“li”会消失。

一种解决方案是将onclick更改为onmousedown。

Answer 2

问题是触发器的顺序，如CeritT的答案。

我的建议是使用transition使ul不会立即消失，从而允许点击它。

ul.search-results {
    list-style-type: none;
    padding: 0;
    margin: 0;
    visibility: hidden;
    transition: visibility 0.2s;
}

HTML / CSS下拉输入onclick未触发

2 个答案: