我正在尝试:
1-将鼠标悬停在 Div1 上时,会出现 Div2。
2-Div 2 有一个文本字段。
3-当文本字段具有焦点时,即使悬停已关闭 Div1/Div2,Div2 仍保持打开状态。
4-单击除 Div2 之外的任何内容都会隐藏 Div2
<div id="one"></div>
<div id="two">
<input type="text" id="text">
</div>
$(document).ready(function() {
if(!$('#text').is(":focus")) {
$('#one, #two').hover(function() {
$('#two').toggleClass('k k_b');
});
};
});
div2 没有在焦点上保持打开状态,我认为我的处理方式不正确。
对我来说,代码是这样说的:
“如果#text 没有焦点,请执行此操作。
如果#text 具有焦点,则不要执行此操作。”
div2 在悬停时隐藏。一旦它获得焦点,隐藏它的唯一方法就是点击关闭。我也不确定事件委托(delegate)将如何在这里发挥作用。有人有什么建议吗?我正在考虑使用 onblur
来隐藏(或删除新类)。
最佳答案
首先,您应该使用 opacity: 0
或 display: none
隐藏元素,这也允许您正确地为它们设置动画。
问题在于执行的顺序以及处理程序(如 .hover
)的存储顺序。你写了:
“加载文档时,如果 #text 没有焦点,请记住始终在悬停时切换 k 和 k_b”
所以基本上你总是附加悬停处理程序。
这是一个更复杂但有效的解决方案,请参阅 fiddle 以了解轻微的 css 和 html 更改:
$(document).ready(function() {
$('#wrapper').hover(function() {
$('#two').fadeIn(200);
}, function() {
if ( !$('#text').is(":focus") )
$('#two').fadeOut(200);
});
$('#two').on("blur", "input", function() {
if ( !$('#one').is(":hover") )
$('#two').fadeOut(200);
});
});
还有 fiddle :http://jsfiddle.net/7FGK8/1/
关于javascript - jquery - 如果字段有焦点则执行事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23408799/