HTML / CSS下拉式输入onclick不会触发 [英] HTML/CSS Dropdown input onclick not firing
问题描述
我正在尝试使用仅使用CSS / HTML的下拉建议来实现搜索框。它显示正常，但我无法获得onclick事件点击下拉元素时触发，并且链接也不起作用。如果我不隐藏列表，那么它可以正常工作，但是当隐藏然后使用输入框的：focus选择器显示时，它不会对点击作出反应。
任何想法如何解决这个问题？这是隐藏元素的正常行为吗？
它是基于这个例子，它似乎也没有在那里工作。
一个简单的例子重现了这个问题： p>
HTML：
< html>
< head>
< link rel =stylesheethref =test.css/>
< / head>
< input class =inputfieldtype =textplaceholder =SEARCH ...>
< ul class =search-results>
< li class =typeaheadonclick =console.log（'test'）>
< a class =centerhref =/ test> test< / a>
< / li>
< li class =typeaheadonclick =console.log（'test'）>
< a class =centerhref =/ test> test< / a>
< / li>
< li class =typeaheadonclick =console.log（'test'）>
< a class =centerhref =/ test> test< / a>
< / li>
< li class =typeaheadonclick =console.log（'test'）>
< a class =centerhref =/ test> test< / a>
< / li>
< / ul>
< / html>
CSS：
input {
width：300px;
height：26px;
padding-left：10px;
border：1px solid lightgrey;
概述：无;
}
ul {
list-style-type：none;
padding：0;
保证金：0;
可见性：隐藏;
}
输入：focus + ul {
visibility：visible;
}
li {
border：1px solid lightgrey;
border-top-style：none;
width：300px;
height：25px;
padding-left：10px;
背景：#fff;
光标：指针;
}
li：hover {
background-color：lightgrey;
}
li：悬停{b $ b color：white;
}
a {
颜色：黑色;
font-size：12px;
display：block;
text-decoration：none;
问题是这个触发器，就像在CeritT的答案中一样。
我的建议是使用 transition 来制作 ul 不会立即消失，因此可以点击它。
ul.search-results {
list-style-type：none;
padding：0;
保证金：0;
可见性：隐藏;
过渡：可见度0.2s;
}
I am trying to implement an search box with dropdown suggestions using CSS/HTML only. It displays fine but I cannot get the onclick event to fire when clicking on a dropdown element and the links don't work either. If I don't hide the list then it works fine, but when hidden and then displayed using the ":focus" selector of the input box it does not react to clicks anymore.
Any idea how to fix this? Is this a normal behavior for hidden elements?
It is based on this example, and it does not seem to work there either.
A simple example reproducing the problem:
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;
}
The problem is the order of the triggers, as in CeritT's answer.
My suggestion is to use transition to make ul to not disappear immediately, thus allow clicking on it.
ul.search-results {
list-style-type: none;
padding: 0;
margin: 0;
visibility: hidden;
transition: visibility 0.2s;
}
这篇关于HTML / CSS下拉式输入onclick不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
