Итак как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику.
Чтобы было понятно, этот скрипт пишется для этого виджета:
Скрипт будет написан для такой структуры (все лишние теги и классы удалены для простоты восприятия), в вашем шаблоне могут быть другие классы:
<ul class="product-categories"> <li><a>Для малышей</a></li> <li><a>Для мальчиков</a></li> <li><a>Для девочек</a></li> <li class="cat-parent"><a>Прочие игрушки</a> <ul class='children'> <li><a>Фигурки и персонажи</a></li> <li><a>Игры</a></li> <li><a>Конструкторы и головоломки</a></li> <li><a>Другие игрушки</a></li> </ul> </li> <li class="cat-parent"><a>Прочие товары</a> <ul class='children'> <li class="cat-item cat-item-19"><a>Мобили</a></li> </ul> </li> </ul>
Вы можете исправить скрипт под свои классы и под свою структуру:
$('.product-categories .cat-parent').children('a').click(function() { $(this).siblings('.children').slideToggle(); return false; });
Для дочернего меню нужно задать display: none; в стилях:
ul.children{ display: none; }
В некоторых шаблонах есть специальное поле для добавления своих js-кодов
Например:
Или добавить его в свой файл скриптов, например custom.js:
$(function() { $('.product-categories .cat-parent').children('a').click(function() { $(this).siblings('.children').slideToggle(); return false; }); });
Пример
See the Pen category menu woocommerce open on click by Denis (@deniscreative) on CodePen.0