Intereting Posts
Facebook неправильно очищает URL-адреса Пять сообщений из категории в нижнем колонтитуле Заголовки безопасности HTTP в wp-config категории сообщений – как показывать только категории с определенным идентификатором родителя Почему Worpdress не создает таблицу в базе данных? Кто-нибудь разработал плагин для защиты от нежелательной почты, чтобы просто позволить пользователям блокировать все, что они хотят, но тот, который также будет легко работать по IP-адресам? символы the_terms, не ограничивающие Вывод матча REST API из пользовательской конечной точки Shold Я вручную добавил 'cap' для роли администратора? Интеграция дерева вариантов пользовательского CSS Добавить класс CSS для ссылки в редакторе TinyMCE Текстовые фильтры для WordPress Genesis Пользовательский запрос wp mysql Как разместить тему страницы в специальном поле / div? Есть ли блок-схема последовательности загрузки WordPress?

(Разрешено) Как добавить кнопку подменю для переключения всех элементов «li», имеющих подменю?

Я создаю мобильное навигационное меню. Я не буду в меню работать следующим образом:

введите описание изображения здесь

На этом изображении вы видите мобильную навигацию с несколькими уровнями глубины.

Вот как я выгляжу так:

<ul> <li></li> <li class="menu-item-has-children"> <div class="toggle-button"></div> <a href=""></a> <ul class="submenu"> <li></li> <li class="menu-item-has-children"> <div class="toggle-button"></div> <a href=""></a> <ul class="submenu"></ul> </li> </ul> </li> </ul> 

Вы можете увидеть пункт меню «Продукты» с скрытыми детьми.

Ниже вы видите «Отрасли». Здесь показаны дети, когда нажата кнопка переключения справа. Дети следующего уровня подменю также могут переключаться и так далее.

Я выводил все пункты меню с 'depth' => '0' , и теперь я не буду подменю расширяться.

Для этого мне нужно добавить элемент HTML-переключателя (см. Выше структуру кода), для которого я могу использовать jQuery для переключения «активного» класса на родительский элемент, который затем показывает дочерние элементы.

Мой вопрос

Как я могу добавить этот элемент переключения во все элементы <li> , у которых есть дети, для всех уровней глубины?

Я думаю, мне нужно отфильтровать wp_nav_menu или добавить пользовательскую функцию walker, но я не уверен, как это сделать.

Solutions Collecting From Web of "(Разрешено) Как добавить кнопку подменю для переключения всех элементов «li», имеющих подменю?"

Мне удалось это решить:

Создать функцию

Поэтому я создал новую функцию пользовательского ходока в functions.php и скопировал весь код основной функции wp nav walker (wp-includes / class-walker-nav-menu.php).

Проверьте элемент меню, в котором есть дети

Затем я добавил этот array_search в public function start_el чтобы проверить, имеет ли родительский элемент класс «menu-item- public function start_el -children»:

$has_children = array_search ( 'menu-item-has-children' , $classes );

Вывести кнопку переключения

Затем я start_el элемент collapse в конце функции start_el если $has_children истинно:

if($has_children != false) : $item_output .= '<div class="toggle-button"></div>'; endif;

Заставляя все это работать

Затем я добавил jQuery для переключения класса на родительский элемент кнопки переключения.

jQuery(".toggle-button").click( function (){ jQuery(this).parent().toggleClass("menu-collapsed"); });

Это работает отлично, но есть ли лучший способ проверить, есть ли в элементе меню дети? Поиск имени класса просто не кажется лучшим решением.