1

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

.sub_menu {margin:15px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <div class="menu_item">
        <a href="/naruzhnaya-reklama/" class="sub_link">Наружная реклама</a>
        <div class="sub_menu">
            <div>
                <a href="/">Вывески</a>
            </div>
        </div>
    </div>
    <div class="menu_item">
        <a href="/interernaya-reklama/" class="sub_link">Интерьерная реклама</a>
        <div class="sub_menu">
            <div>
                <a href="">Таблички</a>
            </div>
        </div>
    </div>
    <div class="menu_item">
        <a href="/" class="sub_link">Защитная пленка на окна</a>
        <div class="sub_menu">
            <div>
                <a href="/">Защитная пленка А1</a>
            </div>
        </div>
    </div>
    <div class="menu_item">
        <a href="/uslugi/" class="sub_link">Услуги</a>
        <div class="sub_menu">
            <div>
                <a href="/">Формовка пластиков</a>
            </div>
        </div>
    </div>
</div>

3 ответа 3

1

$(".menu > .menu_item").click(function(e) {
  var subMenu = $(this).find(".sub_menu");
  if (!subMenu.hasClass("active")) {
    subMenu.addClass("active");
    e.preventDefault();
  }
});
.sub_menu {
  margin:15px;
  display:none;
}

.active {
  display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <div class="menu_item">
        <a href="/naruzhnaya-reklama/" class="sub_link">Наружная реклама</a>
        <div class="sub_menu">
            <div>
                <a href="/">Вывески</a>
            </div>
        </div>
    </div>
    <div class="menu_item">
        <a href="/interernaya-reklama/" class="sub_link">Интерьерная реклама</a>
        <div class="sub_menu">
            <div>
                <a href="">Таблички</a>
            </div>
        </div>
    </div>
    <div class="menu_item">
        <a href="/" class="sub_link">Защитная пленка на окна</a>
        <div class="sub_menu">
            <div>
                <a href="/">Защитная пленка А1</a>
            </div>
        </div>
    </div>
    <div class="menu_item">
        <a href="/uslugi/" class="sub_link">Услуги</a>
        <div class="sub_menu">
            <div>
                <a href="/">Формовка пластиков</a>
            </div>
        </div>
    </div>
</div>

1
  • Спасибо! Все работает как надо!
    – Artem G
    13 дек 2018 в 10:08
0

Присвоить sub_menu класс display:none и по клику на sub_link проверять - если соответствующий sub_menu закрыт открывать его и не выполнять переход, если открыт то просто ничего не делать (осуществится переход по ссылке)

0
$('.page-header__menu-item').hover(function () {

}, function () {
    $(this).find('a').removeClass('active');
});

$('.page-header__menu-item a').click(function (e) {
    if ($(this).parent().hasClass('have_submenu')) {
        let width = $(window).width();
        if (width <= 1210) {
            $('.page-header__menu-item a').not($(this)).removeClass('active');
            if (!$(this).hasClass('active')) {
                $(this).addClass('active');
                e.preventDefault();
            }
        }
    }
});
2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.