当用户单击下拉菜单时如何隐藏下拉菜单 [英] How to hide a dropdown when the user clicks outside of it
问题描述
下面是我正在使用的输入下拉列表的简化版本。
其作用的基本摘要是：如果您专注于输入，则下拉列表出现。如果单击下拉菜单中的选项之一，则该选项将填充输入，并且下拉菜单将消失。这是通过 onfocus 和我称为 dropdown（）; 和 undropdown（）的函数实现的; 。
我陷入了困境，当有人点击其他地方时，我无法使下拉菜单消失。如果我使用 onblur ，它会成功隐藏下拉列表，但是如果单击某个选项，它将不会填充输入，这是因为 onblur 函数首先运行，因此 input（）; 函数不会运行，因为下拉列表已被隐藏。
如果在主体标签或其他父标签上放置 onclick ，则它会认为 onfocus 作为单击，在其中运行 dropdown（）; 函数，然后运行 undropdown（）; 立即功能，因此下拉菜单不会出现，因为功能重叠。
我希望能帮助您弄清楚如何对函数进行排序，以使它们以正确的顺序执行而不会彼此重叠。
JSFiddle可用此处。
函数输入（pos）{var dropdown = document.getElementsByClassName（'drop'）; var li = dropdown [0] .getElementsByTagName（ li）; document.getElementsByTagName（'input'）[0] .value = li [pos] .innerHTML; undropdown（0）;}函数dropdown（pos）{document.getElementsByClassName（'content'）[pos] .style.display = block} function undropdown（pos）{document.getElementsByClassName（'content'）[pos]。 style.display = none;}
.drop {职位：相对显示：inline-block;垂直对齐：顶部；溢出：可见；}。content {显示：无； list-style-type：无；边框：1px实线＃000；填充：0;边距：0;位置：绝对； z索引：2；宽度：100％;最大高度：190px；溢出-y：滚动；}。content li {填充：12px 16px;显示：块； margin：0;}
< div class = drop > <输入type = text name = class placeholder = Class onfocus = dropdown（0） /> < ul class = content> < li onclick = input（0）>选项1< / li> < li onclick = input（1）>选项2< / li> < li onclick = input（2）>选项3< / li> < li onclick = input（3）>选项4< / li> < / ul>< / div>
PS：在除了上述问题外，我建议您进行编辑以使该问题的标题更好，以便遇到类似问题的人可以更轻松地找到它。
在这种情况下，可以在 onblur 上调用一个函数，该函数将触发 undropdown（0）; 很小的setTimeout之后几乎立即执行。像这样：
function set（）{
setTimeout（function（）{
undropdown（0） ;
}，100）;
}
HTML
< input type = text name = class placeholder = Class onfocus = dropdown（0） onblur = set（） / >
不需要其他更改。
函数输入（pos）{var dropdown = document.getElementsByClassName（'drop'）; var li = dropdown [0] .getElementsByTagName（ li）; document.getElementsByTagName（'input'）[0] .value = li [pos] .innerHTML; undropdown（0）;}函数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;显示：inline-block;垂直对齐：顶部;溢出：可见； } .content {display：none; list-style-type：无；边框：1px实线＃000；填充：0;边距：0;位置：绝对； z索引：2；宽度：100％;最大高度：190px；溢出y：滚动； } .content li {padding：12px 16px;显示：块；边距：0; }
< div class = drop> < input type = text name = class placeholder = Class onfocus = dropdown（0） onblur = set（） /> < ul class = content> < li onclick = input（0）>选项1< / li> < li onclick = input（1）>选项2< / li> < li onclick = input（2）>选项3< / li> < li onclick = input（3）>选项4< / li> < / ul> < / div>
Below is a simplified version of the input dropdown I am working with.
A basic summary of what it does is: if you focus on the input, a dropdown appears. If you click one of the options in the dropdown, the option populates the input and the dropdown disappears. This is achieved using onfocus and a functions I called dropdown(); and undropdown();.
I'm in a dilemma, where I'm unable to make the dropdown disappear when someone clicks elsewhere. If I use onblur, it successfully hides the dropdown, but if you click on an option it doesn't populate the input, this is because, the onblur function runs first and, therefore, the input(); function doesn't not run because the dropdown is already hidden.
If you put an onclick on the body tag, or other parent, it considers the onfocus as a click, where it run's the dropdown(); function then the undropdown(); function immediately so the dropdown never appears since the functions overlap.
I would appreciate help on figuring out how to order the functions so that they are executed in the right order without overlapping with each other.
JSFiddle available 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: In addition to the above problem, I would appreciate suggestion for edits to get a better title for this question such that someone experiencing a similar problem could find it more easily.
In this case, On onblur you could call a function which fires the undropdown(0); after a very tiny setTimeout almost instantly. Like so:
function set() {
setTimeout(function(){
undropdown(0);
}, 100);
}
HTML
<input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" onblur="set()" />
No other change is required.
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>
这篇关于当用户单击下拉菜单时如何隐藏下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
