Выпадающее меню закрывается при нажатии на расширяемый элемент подменю. ⇐ CSS

[Anonymous]

У меня есть раскрывающееся меню (мобильное представление), в нем есть свертываемый элемент меню, на который я нажимаю, раскрывающееся меню закрывается, и я не вижу раскрывающихся элементов меню.

Я хочу, чтобы раскрывающееся меню оставалось открытым, когда я нажимаю на расширяемый элемент подменю, пожалуйста, ознакомьтесь с предоставленными jQuery и CSS.

Примечание. Это меню заголовка по умолчанию в конструкторе страниц Divi, и оно вызывает проблемы в представлении на планшете/мобильном устройстве. есть много подобных вопросов, связанных с похожей проблемой, но я хотел поделиться своим кодом и посмотреть, что происходит не так. Спасибо.

Сценарий:
(функция($) { функция setup_collapsible_submenus() { // мобильное меню $('.mobile_nav .menu-item-has-children > a').after(''); $('.mobile_nav .menu-item-has-children > a').each(function() { $(this).next().next('.sub-menu').toggleClass('hide',700); }); $('.mobile_nav .menu-item-has-children > a + span').on('click', function(event) { событие.preventDefault(); $(this).toggleClass('меню-открыть'); $(this).next('.sub-menu').toggleClass('hide',700); }); } $(окно).load(функция() { setTimeout(функция() { setup_collapsible_submenus(); }, 700); }); })(jQuery);
Вот CSS:
#page-container .mobile_nav .menu-item-has-children { положение: относительное; } #page-container .mobile_nav .menu-item-has-children > a { фон: прозрачный; вес шрифта: 600; } /*Это стилизует значок и перемещает его вправо*/ #page-container .mobile_nav .menu-item-has-children > a + span { позиция: абсолютная; правильно: 0; верх: 0; отступ: 10 пикселей 20 пикселей; размер шрифта: 20 пикселей; вес шрифта: 700; курсор: указатель; z-индекс: 50; } /*Здесь вы можете поменять настоящие значки*/ #page-container span.menu-closed:before { содержимое: "\43"; дисплей: блок; цвет: #000; размер шрифта: 18 пикселей; семейство шрифтов: ETmodules; видимость:видимый; } #page-container span.menu-closed.menu-open:before { содержимое: "\42"; }