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
Комментарии (10) к “Как сделать раскрывающееся меню категорий товаров 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
Возможно, у вас в шаблоне уже прописаны какие-то скрипты для меню с дочерними элементами. Нужно смотреть. Код в статье отлично работает на базовом шаблоне, проверено на нескольких проектах.
Вадим
Древняя тема, но такая актуальная) Отличное качество кода, когда просто вставил – и работает как надо.
Спасибо, Денис, за креатив и полезные заметки! Удачи во всём, надеюсь, всё хорошо у тебя.
Мои 5 копеек – развитие идеи, позволяет не меняя шаблонов кастомизировать стандартный виджет категорий woocommerce.
/*вставляем в стили :*/
.cat-parent a
{
font-size: 15px!important;
font-weight: 700;
padding-bottom: 3px;
/* border-bottom: 1px solid red; */
}
.site-main .product-categories .cat-parent ul.children
{
display: none;
}
.site-main .product-categories .cat-parent i
{
color: #fdfdfd;
float: right;
width: 31px;
height: 23px;
text-align: center;
cursor: pointer;
display: inline-block;
padding-top: 3px;
font-size: 17px;
background-color: #72b64f;
/* border: 1px solid black; */
}
.woocommerce .site-main .widget_product_categories li.cat-parent>a {
font-weight: bold;
display: inline-block;
width: 87%;
}
.cat-parent a
{
border-bottom: 1px solid transparent;
}
.cat-parent.open a
{
border-bottom: 1px solid #72b64f;
}
/*вставляем в скрипты:*/
$(‘.site-main .product-categories .cat-parent’).children(‘a’).after(
‘‘
);
$(function() {
$(‘.product-categories .cat-parent’).children(‘i’).click(function() {
$(this).siblings(‘.children’).slideToggle();
if(!$(this).parent(‘.cat-parent’).hasClass(‘open’)){
$(this).parent(‘.cat-parent’).addClass(‘open’);
$(this).parent(‘.cat-parent’).children(‘i’).attr( “title”,”Свернуть”);
}else{
$(this).parent(‘.cat-parent’).removeClass(‘open’);
$(this).parent(‘.cat-parent’).children(‘i’).attr( “title”,”Развернуть”);
}
return false;
});
});