Поправить аккордеон меню категорий

Привет, нужно поправить навигацию (меню категорий).

У нас на старом движке aqua-climate.com.ua по дефолту шло нормальное меню. То есть при клике по категории ее ссылка становилась активной и открывала под собой подкатегории, затем подкатегория также выполняла ту же самую функцию и так далее до скажем 4 уровня вложенности.

На тестовом стенде http://*****/ сейчас категории работают не так. Родительские ссылки не кликаются. Надо доработать скрипт js/accordion/scriptbreaker-multiple-accordion-1.js так чтоб родительские ссылки не только открывали подкатегории но и являлись кликабельными ссылками.

Ниже приведен исходный код использованного вами плагина. Синим цветом выделены строки, добавление которых в плагин приведет к изменению схемы его работы: первый клик на родительской категории развернет ее, второй клик (уже по развернутой ветке) перебросит на страницу этой категории.

Если необходимо, чтобы плагин работал как на вашем прежнем сайте (без анимации разворота категории), тогда помеченные синим строчки кода нужно перенести на место строки // или переместить строки сюда (она также помечена ниже синим цветом).

/*
 * jQuery UI Multilevel Accordion v.1
 *
 * Copyright (c) 2011 Pieter Pareit
 *
 * http://www.scriptbreaker.com
 *
 */

(function ($) {
    $.fn.extend({

        // функция аккордеон меню
        accordion: function (options) {

                       // задаем дефолтные опции
                       var defaults = { accordion: 'true',
                                        speed: 300,
                                        closedSign: '[+]',
                                        openedSign: '[-]'
                                      };

                       // дополняем дефолтные опции нашими опциями
                       var opts = $.extend(defaults, options);

                       // запоминаем ссылку на текущий UL элемент
                       var $this = $(this);

                       // добавляем знак [+] в текст ссылок узловых веток меню
                       $this.find('li').each(function () {

                                                 // если имеет вложенные ветки
                                                 if ($(this).find('ul').size() != 0) {

                                                     // добавляем знак [+] в текст ссылки
                                                     $(this).find('a:first')
                                                            .attr('data-type','top')
                                                            .append('<span>' + opts.closedSign +'</span>');

                                                     // блокируем клики по ссылке
                                                     if ($(this).find('a:first').attr('data-type') == 'top') {
                                                         $(this).find('a:first').click(function () {
                                                                                           return false;
                                                                                       });
                                                     }
                                                 }
                                             });

                        // разворачиваем активный уровень
                        $this.find('li a.selected').each(function () {

                                                             // разворачиваем родительские узлы
                                                             $(this).parents('ul')
                                                                    .slideDown(opts.speed);

                                                             // ставим знак [-] у родительских узлов
                                                             $(this).parents('ul')
                                                                    .parent('li')
                                                                    .find('span:first')
                                                                    .html(opts.openedSign);
                                                         });

                        // назначаем обработчики кликов по ссылкам меню
                        $this.find('li a').click(function () {

                                                     // если имеет вложенные ветки
                                                     if ($(this).parent().find('ul').size() != 0) {

                                                         // или переместить строки сюда

                                                         // если в опциях задан эффект "аккордеон" (авто сворачивание других веток)
                                                         if (opts.accordion) {

                                                             // если ветка еще не развернута
                                                             if (!$(this).parent().find('ul').is(':visible')) {

                                                                 // сворачиваем все развернутые ветки
                                                                 parents = $(this).parent()
                                                                                  .parents('ul');
                                                                 visible = $this.find('ul:visible');
                                                                 visible.each(function (visibleIndex) {
                                                                                  var close = true;
                                                                                  parents.each(function (parentIndex) {
                                                                                                   if (parents[parentIndex] == visible[visibleIndex]) {
                                                                                                       close = false;
                                                                                                       return false;
                                                                                                   }
                                                                                               });
                                                                                  if (close) {
                                                                                      if ($(this).parent().find('ul') != visible[visibleIndex]) {
                                                                                          $(visible[visibleIndex]).slideUp(opts.speed, function () {

                                                                                                                                           // ставим знак [+] в текст ссылки
                                                                                                                                           $(this).parent('li')
                                                                                                                                                  .find('span:first')
                                                                                                                                                  .html(opts.closedSign);
                                                                                                                                       });
                                                                                      }
                                                                                  }
                                                                              });
                                                             }
                                                         }

                                                         // если ветка уже развернута
                                                         if ($(this).parent().find('ul:first').is(':visible')) {

                                                             // имитируем клик по ссылке
                                                             document.location.replace($(this).attr('href'));
                                                             return false;

                                                             // сворачиваем
                                                             $(this).parent()
                                                                    .find('ul:first')
                                                                    .slideUp(opts.speed, function () {

                                                                                             // ставим знак [+] в текст ссылки
                                                                                             $(this).parent('li')
                                                                                                    .find('span:first')
                                                                                                    .delay(opts.speed)
                                                                                                    .html(opts.closedSign);
                                                                                         });

                                                         // иначе ветка была свернута
                                                         } else {

                                                             // разворачиваем
                                                             $(this).parent()
                                                                    .find('ul:first')
                                                                    .slideDown(opts.speed, function () {

                                                                                               // ставим знак [-] в текст ссылки
                                                                                               $(this).parent('li')
                                                                                                      .find('span:first')
                                                                                                      .delay(opts.speed)
                                                                                                      .html(opts.openedSign);
                                                                                           });
                                                         }
                                                     }
                                                 });
                   }
    });
}) (jQuery);

Работет криво, весь замысл как раз в том, чтоб при одном клике на верхнюю категорию сразу перебрасывало на ее страницу и открывались вложенные в нее подкатегории, как в задании.

Кто возьмется доделать платно обращайтесь скайп shmaiserbull

неверно написал - Skype: bullshmaiser

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

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

Скрипт приведен ниже, сейчас же демонстрируется скриншот исследования. Здесь мы делаем средствами браузера (например Google Chrome) инспекцию разметки блока категорий. По разметке видим, что это тег <div class="box category">. Внутри разметки блока наблюдаем UL-список категорий - это тег <ul class="topnav">. Далее в инспектируемой разметке разворачиваем первый элемент списка - это тег <li>...</li>. Внутри него видим вложенный тег <ul>...</ul> - это список подкатегорий. Вложенный список изначально скрыт, то есть имеет стиль display: none. В экспериментальных целях переключая стиль прямо в панели инспекции, наблюдаем правильное появление подкатегорий на странице.

Следовательно нужно повторить это действие, только автоматически с помощью яваскрипта и лишь в отношении активной категории. При этом обратим внимание, что сам корневой UL-список категорий обернут в контейнер <div id="box-category">, поэтому сослаться на список в яваскрипте можно через идентификатор данного контейнера.

У меня нет сведений о строении вашего нынешнего шаблона, каким модулем выводится меню категорий. Предполагаю, это файл http://сайт/design/имя_шаблона/html/common/box-category.htm, или может быть файл http://сайт/design/имя_шаблона/html/common/categories.htm, или в шаблонах новой сборки может быть файл http://сайт/design/имя_шаблона/html/left/categories.htm. Во всяком случае такой файл содержит нечто подобное следующему коду (синим цветом помечены теги, упоминавшиеся выше в исследовании):

{* блок категорий *}{strip}

    <div class="box category">

        <div class="box-heading">
            <span>
                Каталог
            </span> товаров
        </div>


        <div class="box-content">
            <div id="box-category">


                {* подключаем блок категорий *}
                {include file = '../../../common_parts/AIMatrix/categories.htm'

                         items = $categories|default:false

                         filter = ''
                         namepath = ''
                         maxlevel = 3
                         maxcount = 1000000

                         opentag = ''
                             box_opentag = ''
                                 listing_opentag = '<ul class="topnav">'
                                     link_opentag = '<li>'

                                         a_id = ''
                                         a_class = ''
                                         a_active_class = 'selected'
                                         a_highlighted_class = 'highlighted-link'
                                         a_text_maxsize = 256
                                         a_text_top_maxsize = 256
                                         a_target = ''

                                         sublisting_opentag = '<ul>'
                                             sublink_opentag = '<li>'
                                             sublink_closetag = '</li>'
                                         sublisting_closetag = '</ul>'

                                     link_closetag = '</li>'
                                 listing_closetag = '</ul>'
                             box_closetag = ''
                         closetag = ''}

            </div>
        </div>
    </div>

{/strip}

Теперь в конец этого модуля добавим яваскрипт автоматического раскрытия ветви активной категории. В итоге получим (добавленное помечено синим цветом):

{* блок категорий *}{strip}

    <div class="box category">

        <div class="box-heading">
            <span>
                Каталог
            </span> товаров
        </div>


        <div class="box-content">
            <div id="box-category">


                {* подключаем блок категорий *}
                {include file = '../../../common_parts/AIMatrix/categories.htm'

                         items = $categories|default:false

                         filter = ''
                         namepath = ''
                         maxlevel = 3
                         maxcount = 1000000

                         opentag = ''
                             box_opentag = ''
                                 listing_opentag = '<ul class="topnav">'
                                     link_opentag = '<li>'

                                         a_id = ''
                                         a_class = ''
                                         a_active_class = 'selected'
                                         a_highlighted_class = 'highlighted-link'
                                         a_text_maxsize = 256
                                         a_text_top_maxsize = 256
                                         a_target = ''

                                         sublisting_opentag = '<ul>'
                                             sublink_opentag = '<li>'
                                             sublink_closetag = '</li>'
                                         sublisting_closetag = '</ul>'

                                     link_closetag = '</li>'
                                 listing_closetag = '</ul>'
                             box_closetag = ''
                         closetag = ''}

            </div>
        </div>
    </div>


    {* скрипт разворота активной категории *}
    <script language="JavaScript" type="text/javascript">
                                                         
        var el = jQuery('#box-category a.selected');     
        jQuery(el).closest('li').children('ul').show();  
                                                         
        do {                                             
            el = jQuery(el).parent().parent();           
            if (!el.length) break;                       
            if (el[0].tagName != 'UL') break;            
            jQuery(el).show();                           
        } while (true);                                  
                                                         
    </script>                                            

{/strip}

Суть работы скрипта: В контейнере с идентификатором box-category находим ссылку активной категории (такая ссылка имеет класс selected). Сразу раскрываем личные подкатегории ссылки, то есть выполняем команду show(), если у родителя ссылки (это li) имеется дочерний список (это ul). Затем в цикле двигаемся от активной ссылки вверх по ее родительским узлам (это a --> li --> UL --> li --> UL --> ... --> UL) и выполняем на каждом родительском UL команду show(), пока не выйдем за наивысший узел, то есть до момента, когда имя вышестоящего тега уже не ul.