jQuery发现父母是否失去了“关注点”
jQuery发现父母是否失去了“关注点”
提问于 2010-02-04 06:12:54
我坚持要弄清楚使下拉菜单键盘可访问的逻辑。
HTML的结构是这样的(为清楚起见，使用了额外的类名)：
<ul>
<li class="primaryMenuItem">
<a href="">Link 1</a>
<ul class="popUpMenu">
<li><a href="">Sub Link 1</a></li>
<li><a href="">Sub Link 2</a></li>
</ul>
</li>
<li class="primaryMenuItem">
<a href="">Link 2</a>
<ul class="popUpMenu">
<li><a href="">Sub Link 1</a></li>
<li><a href="">Sub Link 2</a></li>
</ul>
</li>
</ul>当悬停链接1和链接2时，将显示子菜单列表(下拉菜单)。我用一些jQuery和jQuery hoverIntent插件就能很好地工作。
问题是，目前这只适用于鼠标。
下一个挑战是让它通过键盘工作。
我可以很容易地将焦点事件添加到顶级链接，然后触发二级菜单：
$('ul.primaryMenuItem a:first').focus([call showMenu function]) 这很好用。
要关闭菜单，一个选项是，当打开另一个菜单时，检查是否已经打开了另一个菜单，如果已经打开，则将其关闭。
这也很好用。
然而，失败的地方是如果你打开了最后一个菜单，并按tab键离开了它。由于您尚未切换到其他菜单，因此此菜单将保持打开状态。
挑战是弄清楚如何/何时关闭菜单以及弄清楚它所需的逻辑(jQuery)。理想情况下，当焦点在页面上的某个元素上而不是菜单的任何子元素上时，我会关闭菜单。
从逻辑上讲，我要找的是：
$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu'))但是，您不能这样做，因为LI实际上没有焦点，而是其中的锚标记。
有什么建议吗？
更新：
也许有一个更好/更简单的方式来问这个问题：
通过jQuery，有没有办法“观察”焦点是否移出了某个特定对象的所有子对象？
Stack Overflow用户
发布于 2013-04-11 06:48:39
我也遇到过类似的问题。我创建了一个jsfiddle来确定父字段集何时失去焦点，然后调用一个函数。它当然可以优化，但这是一个开始。
http://jsfiddle.net/EKhLc/10/
function saveFields() {
$.each($('fieldset.save'),function(index, value) {
// WHERE THE POST WOULD GO
alert('saving fieldset with id '+ value.id);
$(value).removeClass('save');
});
}
$('.control-group').focusin(function(){
var thefield = $(this).parent('fieldset');
if (!thefield.hasClass('active')) {
if($('fieldset.active').length > 0){
$('fieldset.active').removeClass('active').addClass('save');
saveFields();
}
thefield.addClass('active');
} else {
console.log('already active');
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2195877
复制相关文章
相似问题
腾讯云开发者
