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

这可能会使用一些清理，但它可以解决下拉菜单没有按预期匹配本机选择功能的问题。

$(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 2

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

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

Answer 3

刚遇到同样的问题。

以下是关于此问题的相关链接：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;
    });

Answer 4

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

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

4 个答案: