5

有什么方法可以监听显示或隐藏的元素吗？

我绝对希望——每当一个元素从隐藏变为显示时——将焦点放在新显示的元素中的第一个输入元素上

我想为所有内容附加一个点击事件并将其放在文档的顶部，认为这会在任何事情之前触发，我可以跟踪被点击的元素next("div")（或其他东西）是否具有 css 显示属性none，然后设置一个小的超时，然后设置焦点，但是undefined当我尝试访问该 CSS 属性时我得到了

$("html").on("click", "body", function(){
   alert($(this).next("div").css("display")); //undefined
});

有没有办法做到这一点？

4

3 回答 3

3

您可以尝试这样的事情（这有点像 hack）。如果您在 jQuery 中对 css/show/hide/toggle 原型进行猴子修补，您可以测试元素是否:hidden在“滴答”之后更改其属性（我使用了 4 毫秒）。如果是这样，它已经改变了它的可见性。对于动画等，这可能无法按预期工作，但否则应该可以正常工作。

演示：http: //jsfiddle.net/Bh6dA/

$.each(['show','hide','css','toggle'], function(i, fn) {
    var o = $.fn[fn];
    $.fn[fn] = function() {
        this.each(function() {
            var $this = $(this),
                isHidden = $this.is(':hidden');
            setTimeout(function() {
                if( isHidden !== $this.is(':hidden') ) {
                    $this.trigger('showhide', isHidden);
                }
            },4);
        });
        return o.apply(this, arguments);
    };   
})

现在，只需监听showhide事件：

$('div').on('showhide', function(e, visible) {
    if ( visible ) {
        $(this).find('input:first').focus();
    }
});

多田！

PS：我喜欢猴子补丁

于 2013-10-04T15:19:30.367 回答
0

您可以只使用$('div:visible')来检查 div 是否具有display: block或display: none. :visible无论如何，这些是唯一的两个值。

资料来源：如何检查一个元素是否隐藏在 jQuery 中？

-edit- 我意识到我没有仔细阅读，您正在询问一个告诉您显示何时更改的事件。没有，请参阅 Nelson 对您的问题的评论。

于 2013-10-04T14:45:16.363 回答
0

你可以：

var allEls = $('body *');

function isDisplayBlock(arr) {
    var isBlock = [];
    $.each(arr, function(i, e){
        if ($(e).css('display') === 'block') {
            isBlock.push(e);
        }
    })
    return isBlock;
}

但是我不知道如何检查它们是否发生了变化，而不仅仅是检查它们是否被阻塞。

于 2013-10-04T14:42:48.987 回答