Question

有没有办法监听被显示或隐藏的元素？

我希望断言 - 当元素从隐藏变为显示时 - 将焦点放在新显示元素中的第一个输入元素

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

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

有办法做到这一点吗？

Answer 1

你可以尝试这样的事情（这是一种黑客行为）。如果你在jQuery中对css / show / hide / toggle原型进行猴子修补，你可以在＆＃34; tick＆＃34;之后测试该元素是否会改变它的:hidden属性。（我用了4ms）。如果是这样，它改变了它的可见性。这可能不会像动画等那样有效，但是否则应该可以正常工作。

DEMO： 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：我喜欢monkeypatching

Answer 2

你可以：

var allEls = $('body *');

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

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

Answer 3

您可以使用$('div:visible')检查div是display: block还是display: none。这是:visible无论如何看的唯一两个值。

来源：How do I check if an element is hidden in jQuery?

CNC中我意识到我没有彻底阅读，你问的是一个事件会告诉你什么时候显示改变了。没有，请看尼尔森对你问题的评论。

监听从display：none到display：block的任何div

3 个答案: