Функция щелчка документа 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

Для этого может потребоваться некоторая очистка, но это помогло решить проблему, при которой раскрывающиеся списки не закрывались, как ожидалось, для соответствия собственным функциям выбора.

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

Вам нужно добавить tabindex для каждого выбора.После этого это будет работать.Удачи!

Answer 3

Только что столкнулся с той же проблемой.

Вот соответствующая ссылка, говорящая об этом: https://github.com/JamieLottering/DropKick/issues/45

Ваше решение (Кори Обюшон) работает "..." в этом:

Когда вы нажимаете «Снаружи» в раскрывающемся списке, он закрывается ... Однако ...

Теперь, когда вы нажимаете «Внутри» в раскрывающемся списке (который будет нажимать: «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

Я не знаю, является ли это причиной вашей проблемы, но вы должны попытаться добавить ссылку на событие в функцию щелчка:

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