Как показать/скрыть дочерний элемент?

Question

[Eugene Chefranov]

Подскажите как сделать правильное раскрытие подменю по клику?

Имеется такое меню

<ul id="main-menu-mobile" class="menu-responsive">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-122">
<a href="#">Пункт 1</a></li>

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-20"><a href="#"> Пункт 2</a>
    <ul  class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-123"><a href="#">Пункт 2.1</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#">Пункт 2.2</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-26"><a href="#">Пункт 2.3</a>
	<ul  class="sub-menu">
		<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="#">Пункт 2.3.1</a></li>
	</ul>
    </li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="#">Пункт 2.4</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">Пункт 2.5</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="#">Пункт 3</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">Пункт 4</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-23"><a href="#">Пункт 5</a>
<ul  class="sub-menu">
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-125"><a href="#">Пункт 5.1</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-124"><a href="#">Пункт 5.2</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="#">Пункт 6</a></li>
</ul>

И я написал такой код jQuery

$(".menu-responsive > li.menu-item-has-children > a").click(function(e){
		            e.preventDefault();
		            $(".menu-responsive > li > .sub-menu").toggle('slow');

		      });

Но при клике открывается не только дочернее подменю, но и другие подменю с тем же классом. Как ограничится и открывать подменю только по тем которым кликнули? Классы менять не могу, это меню генерируется в WordPress.

Comments

[Ankhena]

https://jsfiddle.net/Lqfsrrgy/

Answer 1

[Андрей]

тык