Как делать раскрытие и закрытие подменю, при клике по элементу li и переход при клике по ссылке?

Question

[Evgeniy]

Добрый день, помогите пожалуйста решить проблемку с меню.

Нужно сделать так, чтобы в моб.версии при клике на пункт меню li , открывалось внутреннее меню sub-menu.
При втором клике по элементу li - подменю закрывается.
При клике по ссылке li a - происходит просто переход по ссылке

html

<ul class="top-menu">
	<li class="menu-item">
		<a href="">Ссылка с подменю</a>
		<ul class="sub-menu">
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li class="menu-item"><a href="">Ссылка</a></li>
	<li class="menu-item"><a href="">Ссылка</a></li>
</ul>

jQuery

if ($(window).width() <= 1140) {
		$(document).ready(function(){
 		  $('.menu-item > a').click(function(e){
			e.preventDefault();
 			$(this).next('.top-menu li ul').slideToggle();
		  });
		});
}

CSS при разрешении до 1140px

.top-menu li ul {
display:none;
}

Сейчас меню раскрывается, но по ссылке не переходит

Answer 1

[MikUrrey]

Это потому, что e.preventDefault();блокирует переход.

А чтобы сработало открытие, затем переход, нужно использовать complete-калбэк в методе slideToggle:

$(this).next('.top-menu li ul').slideToggle(200, function(){
  document.location.href = e.currentTarget.href
})

Comments

[Evgeniy]

да, но без него происходит быстрое открытие и переход по ссылке

[MikUrrey]

Evgeniy, в таком случае, попробуйте чуть по-другому - дополнил ответ.

[Evgeniy]

MikUrrey, не, всё также ((( быстрое открытие и переход по ссылке

[MikUrrey]

Evgeniy, ну вы же e.preventDefault(); вернули назад?)

[Evgeniy]

MikUrrey, да, и без него также)

[MikUrrey]

Evgeniy, значит, скрипт отваливается с какой-то ошибкой и передает инициативу браузеру, и он просто совершает переход. Смотрели, нет ли чего в консоли?

[MikUrrey]

Evgeniy, и да, похоже таки я ошибся в ответе, попробуйте target вместо currentTarget

[Evgeniy]

MikUrrey, ошибки нет.. видимо дело в чем-то другом, но спасибо)