Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2012, 02:19
Аватар для Кирюха =)
Профессор
Отправить личное сообщение для Кирюха =) Посмотреть профиль Найти все сообщения от Кирюха =)
 
Регистрация: 27.07.2011
Сообщений: 207

Список с плюсиками
Всем привет.Создал список вот такой:
<ul id="menu-priem">
		      <li class="plus level1">ЖКХ
			     <ul class="level2">
				    <li class="plus">Управляющие компании</li>
					<li class="plus">ТСЖ</li>
				 </ul>
			  </li><!--1 уровень-->
			  <li class="plus level1">Дороги
			     <ul class="level2">
				    <li class="plus">Состояние Дорог</li>
					<li class="plus">Лихачи на дорогах</li>
				 </ul>
			  </li><!--1 уровень-->
		    </ul>


Вот код к нему
var fdfdfd = 0;
            jQuery('#menu-priem LI.level1').click(function(){
			fdfdfd++;//плюсуем нечетное нажатие
			if(fdfdfd % 2 !== 0){
	   jQuery(this).removeClass('plus').addClass('minus');
	   jQuery(this).find('ul.level2').slideToggle(400);
			}//Разворачиваем плюс ==> минус
			
			else{
	   jQuery(this).removeClass('minus').addClass('plus');
	   jQuery(this).find('ul.level2').slideToggle(400);
			}//Сворачиваем минус ==> плюс
			
			});

Проблема когда кликаю на UL.level2 LI (LI второго уровня) сворачивается весь UL.level2
Вопрос:как этого избежать?
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2012, 02:20
Аватар для Кирюха =)
Профессор
Отправить личное сообщение для Кирюха =) Посмотреть профиль Найти все сообщения от Кирюха =)
 
Регистрация: 27.07.2011
Сообщений: 207

Вот ссылка на живой пример http://kamskie.ru/obsh-priemnaya.
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2012, 03:33
Аватар для h404
Новичок на форуме
Отправить личное сообщение для h404 Посмотреть профиль Найти все сообщения от h404
 
Регистрация: 24.07.2012
Сообщений: 3

Это всплытие событий. Когда вы кликаете по потомку, событие всплывает в поисках обработчика событий по дереву вверх. Чтобы этого не происходило, можно сравнить узел получивший событие и узел-обработчик.

Я ещё немного упростил ваш код:

jQuery('#menu-priem LI.level1').click(function(e){
    if(e.target === this) {
      jQuery(this)
        .toggleClass('plus')
        .toggleClass('minus')
        .find('ul.level2')
        .slideToggle(400);
    }
});
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2012, 11:04
Аватар для Кирюха =)
Профессор
Отправить личное сообщение для Кирюха =) Посмотреть профиль Найти все сообщения от Кирюха =)
 
Регистрация: 27.07.2011
Сообщений: 207

Ураааааа заработало!!!!! А расскажите про function(e) поподробнее, если конечно вас не затруднит)))))
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2012, 21:00
Аватар для h404
Новичок на форуме
Отправить личное сообщение для h404 Посмотреть профиль Найти все сообщения от h404
 
Регистрация: 24.07.2012
Сообщений: 3

Все обработчики событий в jQuery принимают в качестве аргумента функцияю обратного вызова. При этом в качестве аргумента этой функции передаётся экземпляр объекта Event. Я обозвал этот аргумент e.

Дальше можно сделать вот так и узнать много интересного:

Код:
function(e) {
    console.dir(e);
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
селект переделанный под список Vasёk18 Элементы интерфейса 0 13.04.2012 23:49
Autocomplete + выпадающий список yarnik jQuery 0 08.03.2012 15:20
Эмулировать список через селект Nanto Элементы интерфейса 2 06.03.2012 11:54
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40