jquery toggleclass работает только один раз

Этот сценарий делает так, что когда вы нажимаете на <div>, появляется другой <div>, добавляя класс log_in_box_dd к #big_ul_hide. Как только #big_ul_hide получит этот класс, щелчок в любом месте (кроме #big_ul_hide удалит этот класс, тем самым скрывая его. Таким образом, вы щелкаете, чтобы увидеть всплывающий элемент div, затем щелкните в любом месте, но этот элемент должен скрыть его.

Все это работает, но только один раз. После этого все становится очень странно.
После того, как он будет добавлен, а затем удален, проверка элементов покажет <div id="big_ul_hide" class="">. Я не могу заставить класс повторно добавиться.

Я добавил функцию setTimeout, чтобы она не удаляла класс сразу при нажатии .lin_und.

Итак, почему он не позволяет мне повторно добавить класс? Если я alert(...) после .toggleclass, он будет каждый раз предупреждать, но все равно не применит класс.

скрипка: http://jsfiddle.net/NQxAC/

<script>
$('.lin_und').click(function() {
    $('#big_ul_hide').toggleClass('log_in_box_dd');
});
setTimeout(function() {      
    $('html').click(function() {
        if($('#big_ul_hide').hasClass('log_in_box_dd')) {
            $('#big_ul_hide').removeClass('log_in_box_dd');
        }
    });
    $('#big_ul_hide').click(function(event) {
        event.stopPropagation();
    });
}, 2000);
</script>

javascript jquery toggleclass
person Ghost Echo    schedule 02.04.2014    source источник
comment
почему обработчик кликов внутри setTimeout. Пожалуйста, уберите их из дерьма   -  person Deepak Ingole    schedule 02.04.2014
comment
А зачем вы сюда вкладываете обработчики? (по крайней мере, в вашем jsFiddle...)   -  person A. Wolff    schedule 02.04.2014
comment
Это то, что вам нужно jsfiddle.net/j08691/NQxAC/2?   -  person j08691    schedule 02.04.2014
comment
@ j08691 j08691 да, пожалуйста, опубликуйте ответ с описанием, и я попробую, а затем приму.   -  person Ghost Echo    schedule 02.04.2014
comment
Почему отмечен вниз? Я выполнил требования.   -  person Ghost Echo    schedule 02.04.2014
comment
@Pilot, потому что этот setTimeout должен происходить только при нажатии .lin_und   -  person Ghost Echo    schedule 02.04.2014
comment
@ j08691 j08691, это работает отлично, пожалуйста, опубликуйте, чтобы я мог принять, большое спасибо ... работал над этим около 2 часов ...   -  person Ghost Echo    schedule 02.04.2014

Ответы (3)


arrow_upward
3
arrow_downward

Сначала вам нужно остановить всплытие событий и переместить обработчик события клика на html из внутреннего обработчика кликов, чтобы он существовал сам по себе (в противном случае вы неоднократно привязываете событие клика). Попробуйте использовать:

$('.lin_und').click(function (e) {
    e.stopPropagation();
    $('#big_ul_hide').toggleClass('log_in_box_dd');
    $('#big_ul_hide').click(function (event) {
        event.stopPropagation();
    });
});
$('html').click(function () {
    $('#big_ul_hide').removeClass('log_in_box_dd');
});

пример jsFiddle

person j08691    schedule 02.04.2014

arrow_upward
2
arrow_downward

если вы не перестанете пузыриться на .lin_und с пузырьком до html, который вызовет обработчик события клика. вам не нужен setTimeout. Я бы попробовал что-то вроде этого:

$('.lin_und').on('click', function (evt) {

    evt.stopPropagation();
    $('#big_ul_hide').toggleClass('log_in_box_dd');

});

$('html').on('click', function () {

    $('#big_ul_hide').removeClass('log_in_box_dd');

});

$('#big_ul_hide').on('click', function (evt) {

    evt.stopPropagation();

});

посмотрите, как это работает здесь: демонстрация

Вы хотите, чтобы скрытый элемент div отображался только в синем поле? если это так, измените .toggleClass() на .removeClass() в обработчике кликов html.

person jsGuy    schedule 02.04.2014
comment
Причина, по которой у меня нет вложенного обработчика событий, заключается в том, что вы будете устанавливать прослушиватель событий каждый раз, когда вы нажимаете - person jsGuy; 02.04.2014

arrow_upward
1
arrow_downward

Я не совсем уверен, полностью ли я понял ваши требования, но посмотрите на это: http://jsfiddle.net/NQxAC/1/

$('.lin_und').click(function() {                
    $('#big_ul_hide').toggleClass('log_in_box_dd');             
});
$('body').click(function(e) {
    if (!$(e).target().is('.lin_und'))
        $('#big_ul_hide').removeClass('log_in_box_dd');                 
});

Щелчок по верхнему div переключит нижний. Щелчок в любом другом месте скроет первый.

person Julian    schedule 02.04.2014
comment
не совсем, щелчок div скрывает/показывает. Если у div есть класс, щелкнув где-нибудь, но div удалит класс (скроет div). - person Ghost Echo; 02.04.2014
comment
эм, да. но это то, что происходит прямо сейчас. Или я не понимаю, что вы имеете в виду :/ - person Julian; 02.04.2014
comment
В вашем примере вам нужно щелкнуть триггер div, чтобы скрыть новый div. Я хочу, чтобы это было так, но если щелкнуть где-нибудь еще, это тоже скроется. См. принятый ответ о том, чего я пытаюсь достичь. Спасибо хоть! :-D - person Ghost Echo; 02.04.2014