Как сделать slideToggle для меню третьего уровня?

Question

[demidov_grinch]

Добрый день, уважаемые господа! Есть код jQuery:

$('#menu-menu-vokb-1 > .menu-item-has-children').click(function() {
		$(this).children(".sub-menu").slideToggle();
		console.log("Кликнули по меню второго уровня");
	});
	
	$('#menu-menu-vokb-1 > .menu-item-has-children > .menu-item-has-children').click(function() {
		$(this).children("ul").slideToggle();
		console.log("Кликнули по меню третьего уровня");
	});

Также имеется трехуровневое меню. Каждый элемент, содержащий вложенное меню имеет класс .menu-item-has-children. При попытке кликнуть на меню третьего уровня меню второго уровня закрывается. В чем дело не пойму!

Comments

[Emptyform]

Почему бы вам не предоставить глубокоуважаемым господам html-код меню. Чисто из уважения.

Answer 1

[Татьяна Комарова]

Потому что у вас одинаковые названия классов. Посмотрите внимательно на первую функцию. Когда вы кликните на меню третьего уровня, отработают оба события, потому что и там, и там, вы обращаетесь к ".menu-item-has-children", который содержится в "#menu-menu-vokb-1".

Comments

[demidov_grinch]

но ведь я обращаюсь именно к нужному мне элементу:

$('#menu-menu-vokb-1 > .menu-item-has-children > .menu-item-has-children').

Неужели это ничего не значит?

[Татьяна Комарова]

demidov_grinch: значит, конечно. Второй скрипт срабатывает только при клике на меню третьего уровня. Но при этом же клике сработает и ПЕРВЫЙ СКРИПТ. Просто переименуйте класс третьего уровня, и будет вам счастье.