31.03.2016
Чтобы было понятно, этот скрипт пишется для этого виджета:
Скрипт будет написан для такой структуры (все лишние теги и классы удалены для простоты восприятия), в вашем шаблоне могут быть другие классы:
<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
Комментарии (9) к “Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику”
YoS
То что нужно! Но для неподготовленного пользователя следует добавить что скрипт вставляется в footer.php в теге <code></code>
Oleg
Денис, уточни пожалуйста куда вставлять скрипт
Denis Creative
В некоторых шаблонах есть специальное поле для добавления своих js-кодов

Например:
Или добавить его в свой файл скриптов, например custom.js:
Рамиль
Сделал все по инструкции, но почему то не работает. display:none сработало, а с раскрытием трудности возникли. Структура и классы идентичны. Можете подсказать в чем может быть дело?
Denis Creative
Сложно сказать что-то не видя код. Это как сказать, что у меня тоже Mazda3, и я так же ремонтировал ходовую как и в статье, но стук сзади остался, может ли кто-то подсказать причину.
Вариантов много, нужно смотреть.
Игорь
Здравствуйте! А как переделать скрипт, что бы меню раскрывалось при наведении а не по клику?
Denis Creative
Просто заменить .click на .hover будет не достаточно, необходимо переписать скрипт так:
Но это будет не совсем удобно для пользователя.
Пример – https://codepen.io/deniscreative/pen/mpYRWZ
Иван
Добрый день.
Все способы пробовал, но меню так и не получилось разворачивать по клику как у вас.
По клику на меню, оно открывает категорию перегружая страницу и открывает все дочерние подкатегории.
Как на вашем примере не получается.(
Denis Creative
Возможно, у вас в шаблоне уже прописаны какие-то скрипты для меню с дочерними элементами. Нужно смотреть. Код в статье отлично работает на базовом шаблоне, проверено на нескольких проектах.