Как сделать что бы первый клик открывал подменю, а второй делал переход по ссылке?

Question

[Евгений Осипов]

Есть такое меню:

<table>
    <tbody>
        <tr>
            <td class="menu-item">
                <div class="wrap">
                    <a class="dropdown-toggle" href="/link/">Пункт меню</a>
                    <ul class="dropdown-menu">Выпадающее меню</ul>
                </div>
            </td>
            <td class="menu-item">
                <div class="wrap">
                    <a class="dropdown-toggle" href="/link/">Пункт меню</a>
                    <ul class="dropdown-menu">Выпадающее меню</ul>
                </div>
            </td>
            <td class="menu-item">
                <div class="wrap">
                    <a class="dropdown-toggle" href="/link/">Пункт меню</a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

и js код

$(document).ready(function() {
    $(.menu-item:not([last_item]) .wrap a.dropdown-toggle').click(function(e) {
        e.preventDefault();
    });
    $('.menu-item .wrap a.dropdown-toggle').on('click', function () {
        if ($(this).parent().hasClass('menu-active')) {
            $(this).parent().removeClass('menu-active');
        } else {
            $(this).parent().addClass('menu-active');
        }
        $('.menu-item .wrap a.dropdown-toggle').not(this).parent().removeClass('menu-active');
    });
});

Сейчас при нажатии на Пункт меню к классу .wrap добавляется класс .menu-active и через CSS выводится Выпадающее меню.

Как сделать так, что бы клике на открытый Пункт меню осуществлялся переход по ссылке?

Answer 1

[Антон]

При первом проверять, нет ли класса active (который вешаем при первом клике), если нету, то превентдефолт, если класс есть - превентдефолта быть не должно, и тогда обычный переход

Comments

[Евгений Осипов]

Пробовал так:

$('nav.mega-menu .menu-item:not([last_item]) .wrap:not([menu-active]) a.dropdown-toggle').click(function(e) {
        e.preventDefault();
    });

ничего не происходит, так же открывается и закрывается подменю.

[Антон]

Евгений Осипов, https://jsfiddle.net/4p8vmr9h/1/

[Евгений Осипов]

Антон, спасибо, работает.
Подскажите пожалуйста, как еще прятать открытое выпадающее меню если была нажата другая ссылка?

[Антон]

Евгений Осипов,

$('.dropdown-toggle').on('click', function(){
	
	if(!$(this).parent('.wrap').hasClass('active')) {
  	$('.wrap').removeClass('active');
    $(this).parent('.wrap').addClass('active');
    
    return false;
  }
	
})

[Евгений Осипов]

Антон, благодарю!
Всё работает как надо.

[alex-1917]

только у автора скорее всего BS подключен, он там на меню свои превенты вешает.

[Евгений Осипов]

alex-1917, у меня всё заработало как надо...

[Евгений Осипов]

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

$('body').click(function(){
    $('.wrap').removeClass('menu-active');
});

Переделал на window:

$(window).click(function(){
    $('.wrap').removeClass('menu-active');
});