Нет перехода по ссылкам из-за JS функции. Как изменить JS функцию, чтобы переход по ссылкам заработал?

Question

[smsi]

День добрый.
Изучаю Django.
Возникла трудность с использованием готового шаблона, который я переделываю.

Есть код меню, который ведет себя следующим образом:
Меню по клику открывается, пункты меню по клику разворачиваются, но при клике по ссылкам внутри переход по ссылкам не происходит, меню просто сворачивается.
Мне понятно, что это из-за навешанной функции JS, но, к сожалению, JS я совсем не знаю.
Как изменить поведение функции таким образом, чтобы при клике по ссылкам осуществлялся переход по ним?

Выделил ключевой кусок кода:
Код html

<div class="page_menu_content">
    <ul class="page_menu_nav">
        <li class="page_menu_item">
        <li class="page_menu_item has-children">
            <a href="#">Меню<i class="fa fa-angle-down"></i></a>
            <ul class="page_menu_selection">
                 <li id = "id2"><a href="/2/">2</a></li>
                 <li id = "id1"><a href="/1/">2</a></li>
            </ul>
        </li>
    </ul>
</div>

Код JS

function initPageMenu()
	{
		if($('.page_menu').length && $('.page_menu_content').length)
		{
			var menu = $('.page_menu');
			var menuContent = $('.page_menu_content');
			var menuTrigger = $('.menu_trigger');

			//Open / close page menu
			menuTrigger.on('click', function()
			{
				if(!menuActive)
				{
					openMenu();
				}
				else
				{
					closeMenu();
				}
			});

			//Handle page menu
			if($('.page_menu_item').length)
			{
				var items = $('.page_menu_item');
				items.each(function()
				{
					var item = $(this);
					if(item.hasClass("has-children"))
					{
						item.on('click', function(evt)
						{
							evt.preventDefault();
							evt.stopPropagation();
							var subItem = item.find('> ul');
						    if(subItem.hasClass('active'))
						    {
						    	subItem.toggleClass('active');
								TweenMax.to(subItem, 0.3, {height:0});
						    }
						    else
						    {
						    	subItem.toggleClass('active');
						    	TweenMax.set(subItem, {height:"auto"});
								TweenMax.from(subItem, 0.3, {height:0});
						    }
						});
					}
				});
			}
		}
	}

	function openMenu()
	{
		var menu = $('.page_menu');
		var menuContent = $('.page_menu_content');
		TweenMax.set(menuContent, {height:"auto"});
		TweenMax.from(menuContent, 0.3, {height:0});
		menuActive = true;
	}

	function closeMenu()
	{
		var menu = $('.page_menu');
		var menuContent = $('.page_menu_content');
		TweenMax.to(menuContent, 0.3, {height:0});
		menuActive = false;
	}

Код css не привожу, он не важен, мне кажется.
Интуитивно мне кажется, что из нужно вытащить id и подставить соответствующий ему a href в location, но как это сделать - не пойму.
Помогите пожалуйста. Заранее спасибо.

Comments

[Антон]

За отмену действий браузера по умолчанию ответает evt.preventDefault();
но вы же понимаете, что тогда у вас перестанет работать открывание списков, а будет переход по ссылке?

[smsi]

А нельзя навесить переход по ссылке перед закрытием меню?

Answer 1

[xonar]

У вас evt.preventDefault(); это отменяет дефолтное поведение. Как по мне правильнее было бы сделать, чтоб при нажатие на выпадающее меню ему навешивался класс active у которого в стилях было бы показывать этот блок, а по дефолту эти менюшки выпадающие скрыть. Тут больше стилями можно сделать, чем JS