Как сделать раскрывающееся меню категорий товаров 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
Для того, чтобы можно было открывать картинки из слайдера Royal Slider в popup нужно: 1….
Иногда нужно получить больше информации из отправленной формы, не только те данные, которые заполнил пользователь,…
Несколько дней назад состоялся релиз WordPress 4.4 «Clifford», названный в честь американского музыканта Клиффорда Брауна….
Пример пагинации, которую использую я при верстке в связке с плагином WP-PageNavi.
10 комментариев
Ответить
То что нужно! Но для неподготовленного пользователя следует добавить что скрипт вставляется в footer.php в теге <code></code>
Денис, уточни пожалуйста куда вставлять скрипт
В некоторых шаблонах есть специальное поле для добавления своих js-кодов
Например:
Или добавить его в свой файл скриптов, например custom.js:
$(function() { $('.product-categories .cat-parent').children('a').click(function() { $(this).siblings('.children').slideToggle(); return false; }); });Сделал все по инструкции, но почему то не работает. display:none сработало, а с раскрытием трудности возникли. Структура и классы идентичны. Можете подсказать в чем может быть дело?
Сложно сказать что-то не видя код. Это как сказать, что у меня тоже Mazda3, и я так же ремонтировал ходовую как и в статье, но стук сзади остался, может ли кто-то подсказать причину.
Вариантов много, нужно смотреть.
Здравствуйте! А как переделать скрипт, что бы меню раскрывалось при наведении а не по клику?
Просто заменить .click на .hover будет не достаточно, необходимо переписать скрипт так:
$(function() { $(".product-categories .cat-parent").hover(function() { $(this) .children(".children") .slideToggle(); return false; }); });Но это будет не совсем удобно для пользователя.
Пример — https://codepen.io/deniscreative/pen/mpYRWZ
Добрый день.
Все способы пробовал, но меню так и не получилось разворачивать по клику как у вас.
По клику на меню, оно открывает категорию перегружая страницу и открывает все дочерние подкатегории.
Как на вашем примере не получается.(
Возможно, у вас в шаблоне уже прописаны какие-то скрипты для меню с дочерними элементами. Нужно смотреть. Код в статье отлично работает на базовом шаблоне, проверено на нескольких проектах.
Древняя тема, но такая актуальная) Отличное качество кода, когда просто вставил — и работает как надо.
Спасибо, Денис, за креатив и полезные заметки! Удачи во всём, надеюсь, всё хорошо у тебя.
Мои 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;
});
});