Тач событие по пункту меню

330

05 июня 2017, 21:53

Есть сайт на Wordpress. Стандартным способом создана меню. Каждый пункт меню - это страница. При наведении на пункт меню мышкой выпадает список дочерних страниц. Но, если открыть сайт на iPad(к примеру), то при клике по пункту меню, оно не развернется, а произойдет переход на эту страницу.

Вопрос: как на планшетах посредством CSS(желательно), при нажатии на ссылку страницы в меню срабатывал не переход по ней, а разворачивался список других страниц

Answer 1

Вставьте такой код в свой файл script.js:

jQuery('.menu-item-has-children>a').click(function(event){
    event.preventDefault();
    if (jQuery(this).hasClass('clicked')) {
        jQuery(this).parent('li').find('>ul').css('left', '-9999px');
        jQuery(this).removeClass('clicked');
    } else {
        jQuery(this).addClass('clicked');
        console.log(jQuery(this).parent('li').find('>ul'));
        jQuery(this).parent('li').find('>ul').css('left', '');
    }
});

Код я проверил в консоли браузера, он работает как надо.

Файл script.js должен быть в папке дочерней темы (а я смотрю, она не создана) - у вас установлена стандартная Storefront. Скрипт надо подключить через wp_enqueue_script() в functions.php.

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