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

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;
  });
});

Не уходи, пока не прочитаешь:

Комментарии (5) к “Как сделать раскрывающееся меню категорий товаров 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, и я так же ремонтировал ходовую как и в статье, но стук сзади остался, может ли кто-то подсказать причину.
      Вариантов много, нужно смотреть.

      Ответить

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