Блог

Главная - Вопросы по программированию - Jquery: пожалуйста, помогите объяснить этот код, потому что мне нужно его настроить

Jquery: пожалуйста, помогите объяснить этот код, потому что мне нужно его настроить

#javascript #jquery

#javascript #jquery

Вопрос:

Кто-нибудь может мне это объяснить? Я пытаюсь точно понять, почему выпадающие списки внутри тега li работают нормально, но при использовании формы меню исчезает при нажатии в любом месте.

 menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();
}

Он работает в сочетании с:

 $("html").click(function() {
  menu.find('.active').removeClass('active');
});

Полный код с примером меню:

http://jsfiddle.net/e4yy4/

Ответ №1:

Этот фрагмент кода

 $("html").click(function() {
  menu.find('.active').removeClass('active');
});

удалил бы active класс меню и, таким образом, скрыл бы его при обнаружении щелчка в любом месте страницы.

Но

 menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();});

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

Таким образом, вы можете добавить приведенный ниже код, чтобы переопределить первый фрагмент кода, чтобы он также отменял скрытие при нажатии на форму.

 menu.find('ul > form').bind('click', function (event) {
  event.stopPropagation();});

Вот так
http://jsfiddle.net/Quincy/e4yy4/3 /

Ответ №2:

Вы также хотите остановить form события, распространяющиеся на html (вероятно, должно быть document ).

Измените селектор, чтобы также выбрать дочерние form элементы.

jsFiddle.

Комментарии:

1. привет, спасибо за помощь, не могли бы вы уточнить, что вы подразумеваете под, вероятно, должен быть документ? И что было бы по-другому, если объединить форму и a, как вы сделали, по сравнению с разделением их, как Куинси сделал выше? Спасибо

2. @trying_hal9000: обычно я разрешаю событиям распространяться на document , а не на html элемент, хотя в вашем примере это, вероятно, не имеет значения. Разделение их не имело бы никакого значения, просто сделайте код более подробным и нарушающим DRY.

Ответ №3:

Если вы измените первую проверку на menu.find('ul li>*') then, похоже, это сработает. Я думаю, что эта строка обрабатывала только клики по ссылкам, а элементы вашей формы не являются ссылками.

Ответ №4:

<form> это элемент, такой же, как и любой другой, поэтому он должен иметь право на выбор с помощью селекторов CSS (которые вызываются find() функцией).

Вам нужно изменить свой селектор, чтобы включить <form> тег и, возможно, изменить селектор на получение <input> элементов вместо <a> .

Для получения дополнительной информации о селекторах jQuery, пожалуйста, смотрите: http://api.jquery.com/category/selectors /

Метки: , ,