以下是基本设置:我在包含与辅助功能相关的链接的网站顶部有一个细条。如果启用了javascript,则会隐藏(负边距)。但是,每当用户选中链接时,我都会显示该栏。这就是我正在做的事情:
var bar = $("#bar");
bar.find("a").on("focus", function(){
if(bar.css("margin-top") == "-50px"){
bar.animate({ marginTop: 0 }, 250);
}
});
有效。但是,当关闭这个栏时,它有点棘手。如果我将blur
事件绑定到a
,当我通过每个链接进行选项卡时,它会隐藏。我只想在所有链接模糊时隐藏它。
我想这样做:
bar.find("a").on("blur", function(){
// If no links inside #bar have focus now:
bar.animate({ marginTop: -50 }, 250);
});
如何?
答案 0 :(得分:1)
由于blur
事件会在focus
事件触发之前触发,您应该在blur
事件中设置超时,并在{{focus
事件中取消1}}事件。
(function () {
var bar = $("#bar");
var timeout;
bar.find("a").on("focus", function(){
clearTimeout(timeout);
if(bar.css("margin-top") == "-50px"){
bar.animate({ marginTop: 0 }, 250);
}
});
bar.find("a").on("blur", function(){
timeout = setTimeout(function () {
// If no links inside #bar have focus now:
bar.animate({ marginTop: -50 }, 250);
}, 1);
});
}());
答案 1 :(得分:1)
这样做:
bar.find("a").on("blur", function() {
setTimeout(function() {
if( $('a:focus').length === 0 ) {
// If no links inside #bar have focus now:
bar.animate({ marginTop: -50 }, 250);
}
}, 15);
});
这个查询可能有焦点的所有anchors
,如果.length
为零,我们应该知道我们现在可以隐藏该栏。我还没有测试该代码,请告诉我。