1

Повесил обработчик клика на кнопку отображающую, скрывающую дополнительный блок со списком. Все работает.

$('.button').on('click', function (event) {
  event.preventDefault();
  var ul = $(this).next('.ul');
  ul.toggle();
});

Решил сделать еще так, что бы дополнительный блок скрывался при клике за его пределами.

$(document).on('click', function (event) {
    var ul = $('.ul');
    if (!ul.is(event.target) && ul.has(event.target).length === 0 && ul.is(':visible')) {
        ul.hide();
    }
});

После этого toggle перестал работать. Уже перепробовал разные комбинации кода со всевозможных сайтов, но ничего не помогает. Подскажите, пожалуйста, где ошибка.

1

1 ответ 1

2

Ваш обработчик click на документе выполняется и в случае нажатия кнопки. Чтобы это предотвратить, используйте event.stopPropagation.

$('.button').on('click', function (event) {
  event.preventDefault();
  event.stopPropagation(); // !!!
  var ul = $(this).next('.ul');
  ul.toggle();
});

Пояснение

Сначала выполняется обработчик клика на кнопке. Он делает .ul видимым. Потом (если нет event.stopPropagation) выполняется обработчик клика на документе. В этот момент .ul - видимый, а event.target (кнопка) находится вне .ul. И .ul снова прячется.

7
  • Спасибо, помогло! Только не понятно, ведь обработчик поднявшись до document не должен проваливаться в условие if и закрывать блок. 20 фев 2017 в 14:15
  • @Евгений В обработчике для документа Вы не проверяете event.target на .button.
    – user176262
    20 фев 2017 в 15:09
  • Igor наверно я что-то не правильно понимаю. Я думал что hide в document сработает только при полном соответствии условию if. А условие вроде гласит: клик не должен быть на блоке И не должен быть на его потомках И блок должен быть развернут. Или hide может сработать без учета условия? 20 фев 2017 в 15:55
  • @Евгений мне кажется при клике на кнопку и видимом .ul все условия удовлетворяются. Сейчас посмотрю фидл.
    – user176262
    20 фев 2017 в 16:01
  • @Евгений Да. Сначала выполняется обработчик клика на кнопке. Он делает .ul видимым. Потом (если нет event.stopPropagation) выполняется обработчик клика на документе. В этот момент .ul - видимый, а event.target (кнопка) находится вне .ul.
    – user176262
    20 фев 2017 в 16:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.