Как исправить jquery accordin?

Тема в разделе "JavaScript", создана пользователем Sylon, 1 янв 2016.

Метки:
Модераторы: ZiX
  1. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    224
    Симпатии:
    110
    Всем привет! Помогите, пожалуйста, новичку разобраться и понять, что в коде jquery не так, чтобы сделать его работающим. С меня много симпатий. Мучаюсь уже очень долго...:-(
    Код:
    <script>
        jQuery(function($){
            $(`.multi-accordion`).on('click', '.multi-accordion li > a', function (event) {
               var $this = $(this), $next = $this.next();
               if ($next.length) {
                 $next.slideToggle().parent().siblings().children('ul').filter(':visible').slideToggle();
                event.preventDefault();
               }
            });
        });
    </script>
    
    Разметка Html является динамической, то есть может меняться в зависимости добавления новых категорий или удаления в админ-панели. Поэтому <ul> и <li> без классов.
    Код:
    <div>
        <ul class="multi-accordion">
            <li><a href="http://agestor.ru/category-id3/category-level1a.html">Category level 1 (a)</a>
                <ul>
                    <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2a.html">Category level 2 (a)</a></li>
                        <ul>
                            <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2a/category-level3a.html">Category level 3 (a)</a></li>
                            <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2a/category-level3b.html">Category level 3 (b)</a></li>
                            <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2a/category-level3c.html">Category level 3 (c)</a></li>
                        </ul>
                    <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2b.html">Category level 2 (b)</a></li>
                    <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2c.html">Category level 2 (c)</a></li>
                </ul>
            <li><a href="http://agestor.ru/category-id3/category-level1b.html">Category level 1 (b)</a></li>
            <li><a href="http://agestor.ru/category-id3/category-level1c.html">Category level 1 (c)</a></li>
        </ul>
    </div>
    Итог манипуляций на сайте (боковое вертикальное меню) - http://agestor.ru/category-id3/category-level1a.html
     
    Последнее редактирование: 1 янв 2016
  2. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    111
    Симпатии:
    479
    Для начала, строка $(document).on('click', '.accordion li > a', function (event) { привязана к конкретному стилю, а именно .accordion, элементы которого отсутствуют в приведенном html коде. Класс .accordion, по всей видимости, должен быть назначен какому-то из элементов ul.
     
    Sylon нравится это.
  3. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    111
    Симпатии:
    479
    Понятно. Ну, во-первых, у вас там синтаксическая ошибка в используемых кавычках:
    [​IMG]
    Во-вторых, привязка триггера черт знает к чему сделана. Возможно вот то, что вы ищите:

    HTML:
    jQuery(function($){
        $('.multi-accordion li > a').on('click', function (event) {
            var $this = $(this), $next = $this.next();
            if ($next.length) {
            $next.slideToggle().parent().siblings().children('ul').filter(':visible').slideToggle();
            event.preventDefault();
            }
        });
    });
     
    Sylon нравится это.
  4. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    224
    Симпатии:
    110
    Спасибо большое, очень помогли!!! А насчёт триггера, я так понимаю это event, это сделано, чтобы проверять есть ли вложение если есть, то отключается ссылка.
    Помогите, пожалуйста, прикрутить куки, вот код попытки, но он не работает.
    Код:
    <script>
            jQuery(function($){
                var openItem = false;
                if($.cookie('openItem') && $.cookie('openItem') != 'false'){
                    var openItem = parseInt($.cookie('openItem'));
                }
                $('.multi-accordion').accordion({
                    active: openItem,
                    collapsible: true,
                    autoHeight: false
                });
                $('.multi-accordion li > a').on('click', function (event) {
                    $.cookie("openItem", $("#accordion").accordion("option", "active"));
                    var $this = $(this), $next = $this.next();
                    if ($next.length) {
                    $next.slideToggle().parent().siblings().children('ul').filter(':visible').slideToggle();
                    event.preventDefault();
                    }
                $('.multi-accordion > li').click(function(){
                    $.cookie('openItem', null);
                    var link = $(this).find('a').attr('href');
                    window.location = link;
                });
            });
    </script>
     
    Последнее редактирование: 2 янв 2016