Как сделать открытие второго и третьего меню по клику с одинаковыми классами, Jquery?

Question

[Евгений Саймон]

Привет ребят!
Подскажите как правильно сделать кнопку открытия дочерних меню? Совсем запутался((
Делаю меню на wordpress своими силами. Есть стандартная менюха завернутая в дивы. Хочу на мобильных чтоб работало как аккордеон по клику на кнопку справа от ссылки. Вообщем:
Вот jquery, который открывает главное мени и добавляет ко всем родительским пунктам кнопку по которой собственно и должно открываться меню второго и третьего уровня:

jQuery(document).ready(function(){
        jQuery('.mobilemenu_toggle').click(function(eventObject) {
                eventObject.preventDefault();
        }).toggle(function(){
                jQuery(this).parents('.menuwrapp_mobile').find('.menu_mobile').slideDown(200);
        }, function(){
                jQuery(this).parents('.menuwrapp_mobile').find('.menu_mobile').slideUp(200);
        });
	$("ul.sub-menu").before("<label class='moreul'>Кнопка</label>");
	$("li.menu-item-has-children > label.moreul").click(function() {
    $("li.menu-item-has-children > label.moreul + ul.sub-menu").toggleClass("block");
})
});

Вот полная структура меню:

<!--Родительское меню-->
<ul class="menu_mobile">
	<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-304 current_page_item menu-item-has-children menu-item-318">
	<a href=" ">Эмоциональная психология</a>
	<label class="moreul">Кнопка</label>
		<!--Дочернее меню второго уровня-->
		<ul class="sub-menu block">
			<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-321">
				<a href=" ">Человек и жизнь</a>
				<label class="moreul">Кнопка</label>
				<!-- Дочернее меню третьего уровня -->
					<ul class="sub-menu block">
						<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-458"><a href=" ">Многомерный организм человека</a></li>
						<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-462"><a href=" ">Окружающая среда</a></li>
						<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-499"><a href=" ">Социальная среда</a></li>
					</ul>
			</li>
			<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-504">
				<a href=" ">Люди в жизни человека</a>
				<label class="moreul">Кнопка</label>
				<!--Дочернее меню второго уровня-->
					<ul class="sub-menu block">
						<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-496"><a href=" ">Внутренний Мир Человека</a></li>
						<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-493"><a href=" ">Тонкий Мир</a></li>
					</ul>
			</li>
			<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-484"><a href=" ">Бог и Вселенная для человека</a></li>
			<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-471"><a href=" ">Принципы Эмоциональной Психологии</a></li>
		</ul>
	</li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-319"><a href=" ">Блог</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-317"><a href=" ">Консультации</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-316"><a href=" ">Обучение</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-315"><a href=" ">Поддержите нас</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-314"><a href=" ">Контакты</a></li>
</ul>

Answer 1

[leni_m]

я использую событие on (при)

$('кнопка').on('click', function(){ // при клике
   // код;
});

Но так не сработает , если кнопки еще нет на странице, а появится она потом(я так понял у вас как раз этот случай)
И решает данную проблему следующая конструкция:

$('body').on('click', 'кнопка', function (){
   // код;
});

Т.к. body есть всегда, этот скрипт сработает и будет сравнивать по каждому клику, нажали-ли мы на кнопку

Comments

[Евгений Саймон]

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

[leni_m]

при клике что-то типа:

var papa = $(this).parents(селектор папы); // находим родителя
papa.find(селектор подменю); // находим подменю

только что загуглил эти методы, за работу данного кода не ручаюсь, но думаю сто-пудова при помощи этих методов можно реализовать

[Евгений Саймон]

leni_m: смотрел такое, проблема в одинаковых селекторах, поэтому и скинул скелет меню

[leni_m]

Я сам чайник и ваш скрипт мне не особо понятен))
Что я вижу так это убирается класс

$("li.menu-item-has-children > label.moreul").click(function() {
    $("li.menu-item-has-children > label.moreul + ul.sub-menu").toggleClass("block");
})

А вот этот код поидее должен работать так:

var papa = $(this).parents(селектор папы); // тут родитель именно той кнопки, на которую нажали
papa.find(селектор подменю); // находим именно то подменю именно того родителя

[leni_m]

как я понимаю this это не совсем .moreul, a .moreul, на который мы нажали.

[leni_m]

вы возможно без $(this) пробовали, поэтому это на все классы и распространялось