Раскрывающееся по клику меню на jQuery

Раскрывающееся по клику меню на jQuery.

Меню:

<ul id="my-menu">
  <li><a href="#0">Главная</a></li>
  <li><a href="#0">О компании</a>
    <ul>
      <li><a href="#0">История</a></li>
      <li><a href="#0">Настоящее</a></li>
      <li><a href="#0">Будущее</a></li>
    </ul>
  </li>
  <li><a href="#0">Контакты</a></li>
  <li><a href="#0">Продукция</a>
    <ul>
      <li><a href="#0">Мясные продукты</a>
        <ul>
          <li><a href="#0">Колбаса</a></li>
          <li><a href="#0">Сосиски и сардельки</a></li>
          <li><a href="#0">Деликатесы</a></li>
        </ul>
      </li>
      <li><a href="#0">Алкоголь</a>
        <ul>
          <li><a href="#0">Вино</a></li>
          <li><a href="#0">Водка</a></li>
          <li><a href="#0">Пиво</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Скрипт:

$(document).ready(function() {
  $('ul#my-menu ul').each(function(index) {
    $(this).prev().addClass('collapsible').click(function() {
      if ($(this).next().css('display') == 'none') {
        $(this).next().slideDown(200, function () {
          $(this).prev().removeClass('collapsed').addClass('expanded');
        });
      }else {
        $(this).next().slideUp(200, function () {
          $(this).prev().removeClass('expanded').addClass('collapsed');
          $(this).find('ul').each(function() {
            $(this).hide().prev().removeClass('expanded').addClass('collapsed');
          });
        });
      }
      return false;
    });
  });
});

Не забываем подключить сам jQuery.

Более подробная инструкция тут.

Запись опубликована в рубрике JavaScript с метками . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *