jquery文档点击功能仅适用于Firefox

Question

我正在使用 dropkick.js 来设置选择菜单的样式。当您单击菜单之外的任何位置时，我试图关闭菜单。但removeClass()（和document.click()）仅适用于firefox。在 webkit 中，单击外部或文档中的其他任何位置都不会关闭菜单。

删除“.dk_open”和“.dk_focus”类会将元素返回到 display:none，从而隐藏菜单。

有谁看到任何可能导致这种不一致的情况吗？谢谢！

        $('.wpcf7 select').dropkick();

        var $dkopen = $('.dk_open');

        $(document).click(function(){
            $dkopen.removeClass('dk_open dk_focus');
        });

        $dkopen.click(function(){
            e.stopPropagation();
        });

Answer 1

您需要为每个选择添加 tabindex。之后它就会起作用。
祝你好运！

Answer 2

这可能需要进行一些清理，但它可以解决下拉列表未按预期关闭以匹配本机选择功能的问题。

$(document).click(function(){
    $('.dk_open').removeClass('dk_open');
});

$('.dk_open').live('click',function(e){
    e.stopPropagation();
});

$('.dk_container, .dk_toggle').live('click', function(e){
     $('.dk_open').removeClass('dk_open');
});

添加了最后一个事件处理程序，以在选择另一个下拉菜单时关闭所有打开的下拉菜单。

Answer 3

我不知道这是否是您问题的原因，但您应该尝试在点击函数中添加对该事件的引用：

 $dkopen.click(function(e /*<-- here*/){
     e.stopPropagation();
 });

Answer 4

刚刚面临同样的问题。

这是讨论此问题的相关链接： https://github.com/JamieLottering/DropKick/issues/ 45

您的解决方案（Corey Aubuchon）确实“有效”...因为：

当您单击下拉列表的“外部”时，它确实会关闭...但是...

现在，当您单击在下拉菜单“内部”（单击：“dk_container”或“dk_toggle”）-下拉菜单不会关闭...

（而且，我不是在谈论在这里选择“选项”，我在说什么关于单击与首先单击查看选项相同的“向下”箭头）

我不是 JS 开发人员，我只是将此处找到的解决方案与引用链接中的解决方案结合起来，形成一些没有给出的内容不管怎样，它确实有效。

无论如何，试试这个...这个适用于 Chrome、IE、+ FF（在任何情况下，您都可以单击内部或外部）它会起作用:)

    $(document).click(function(){$('.dk_open').removeClass('dk_open');});
    $('dk_open').on('click',function(e){e.stopPropagation();});
    $('.dk_container, .dk_toggle').on('click',function(e){var$dk=$(this).parents('.dk_container').first();{$('.dk_open').removeClass('dk_open');$dk.toggleClass('dk_open');}return false;});

..或者...如果您愿意...这是非缩小版本：

    $(document).click(function(){
        $('.dk_open').removeClass('dk_open');
    });
    $('.dk_open').on('click',function (e) {
        e.stopPropagation();
    });
    $('.dk_container, .dk_toggle').on('click',function (e) {

        var $dk  = $(this).parents('.dk_container').first();

        if ( $.browser.webkit ){
            $('.dk_open').removeClass('dk_open');
                $dk.toggleClass('dk_open');
        }
        return false;
    });