Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику

Wordpress
31.03.2016

Чтобы было понятно, этот скрипт пишется для этого виджета:
Как сделать раскрывающееся меню категорий товаров 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

Рекомендую к прочтению:

Комментарии (9) к “Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику”

  • YoS

    То что нужно! Но для неподготовленного пользователя следует добавить что скрипт вставляется в footer.php в теге <code></code>

    Ответить

  • Oleg

    Денис, уточни пожалуйста куда вставлять скрипт

    Ответить

    • Denis Creative

      В некоторых шаблонах есть специальное поле для добавления своих js-кодов
      Например:

      Или добавить его в свой файл скриптов, например custom.js:

      $(function() {
  $('.product-categories .cat-parent').children('a').click(function() {
    $(this).siblings('.children').slideToggle();
    return false;
  });
});
      Ответить

  • Рамиль

    Сделал все по инструкции, но почему то не работает. display:none сработало, а с раскрытием трудности возникли. Структура и классы идентичны. Можете подсказать в чем может быть дело?

    Ответить

    • Denis Creative

      Сложно сказать что-то не видя код. Это как сказать, что у меня тоже Mazda3, и я так же ремонтировал ходовую как и в статье, но стук сзади остался, может ли кто-то подсказать причину.
      Вариантов много, нужно смотреть.

      Ответить

  • Игорь

    Здравствуйте! А как переделать скрипт, что бы меню раскрывалось при наведении а не по клику?

    Ответить

    • Denis Creative

      Просто заменить .click на .hover будет не достаточно, необходимо переписать скрипт так:

      $(function() {
  $(".product-categories .cat-parent").hover(function() {
      $(this)
        .children(".children")
        .slideToggle();
      return false;
    });
});

      Но это будет не совсем удобно для пользователя.

      Пример – https://codepen.io/deniscreative/pen/mpYRWZ

      Ответить

  • Иван

    Добрый день.
    Все способы пробовал, но меню так и не получилось разворачивать по клику как у вас.
    По клику на меню, оно открывает категорию перегружая страницу и открывает все дочерние подкатегории.

    Как на вашем примере не получается.(

    Ответить

    • Denis Creative

      Возможно, у вас в шаблоне уже прописаны какие-то скрипты для меню с дочерними элементами. Нужно смотреть. Код в статье отлично работает на базовом шаблоне, проверено на нескольких проектах.

      Ответить

Оставить комментарий