Как добавить класс для оформления accordion?

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

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

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    241
    Симпатии:
    100
    Всем привет! Помогите, пожалуйста, придумать как корректно добавить класс к аккордеону. Чтобы добавить знак открытой закрытой вкладки. Ниже код, он присваивает функцию клику, если она не срабатывает, то запускается открытие вкладки. Это нужно для того, чтобы проверять есть ли вложение в списке, если нет, то работает как ссылка. 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();
        }
    });
    Код:
    <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>
                    <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>
            <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>
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    Код:
    $('.multi-accordion li > a').on('click', function (event) {
        var $this = $(this), $next = $this.next();
        if ($next.length) {
            $next.slideToggle().parent().toggleClass('opened').siblings().children('ul').filter(':visible').slideToggle();
            event.preventDefault();
        }
    });
     
    Sylon нравится это.
  3. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    241
    Симпатии:
    100
    А если снова нажать и вкладки закроются, что тогда будет? Просто .slideToggle() он получается универсальный, если было открыто, закроет и наоборот.
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    эту конструкцию я не трогал, я просто добавил для открытой вкладки класс opened. При закрытии класс удаляется
     
    Sylon нравится это.
  5. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    241
    Симпатии:
    100
    Подскажите, пожалуйста, как сделать так, чтобы иметь оба класса для закрытой вкладки и открытой соответственно. И чтобы класс присваивался только если есть вложение во вкладке. А то html разметка может меняться по мере добавления и удаления категорий в админ-панели.
     
  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    зачем два класса то?
    Это уже стилями делается.
    http://codepen.io/anon/pen/eJgvLj

    Просто с классом opened переназначай стили
     
    Sylon нравится это.
  7. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    241
    Симпатии:
    100
    Ну а если такой момент, видим 4 вкладки, только в одной есть вложение, и только на ней стрелочка вниз, а когда ее нажимаем, стрелочка вверх показывает? Как такое сделать, если нет постоянной html разметки и вложение то есть, то нет.
    С этой точки зрения поэтому скрипт так и выглядит, чтобы при нажатии на li > a если нет вложения, то срабатывает уже функции аккордеона. Прошу прощения, если сумбурно описываю, пытаюсь себе меню сделать, но опыта нет. Направьте, пожалуйста, в нужном направлении. Очень много вариаций в инете, от этого мало, что понятно даже со справочником.
     
    Последнее редактирование: 3 янв 2016
  8. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    Доработал
    Код:
    var arrow = $('.multi-accordion li > a').next();
    if (arrow.length) {
      $(arrow).parent().append('V');
    }
    $('.multi-accordion li > a').on('click', function (event) {
        var $this = $(this), $next = $this.next();
        if ($next.length) {
            $next.slideToggle().parent().toggleClass('opened').siblings().children('ul').filter(':visible').slideToggle();
            event.preventDefault();
        }
    });
    http://codepen.io/anon/pen/bEgrrw

    Где
    Код:
    $(arrow).parent().append('V');
    доделываешь под себя
     
    Sylon нравится это.
  9. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    241
    Симпатии:
    100
    Посмотрите, пожалуйста, всё верно работает, остаётся только в css сделать оформление и вместо "V" будет svg знак на одном месте, только поворачиваться на 180 градусов при открытии вкладки? http://agestor.ru/category-id3/category-level1a/category-level2b.html Скажите, пожалуйста, а как .append('V') сделать не выводящим текст, а знак?
     
    Последнее редактирование: 3 янв 2016
  10. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    Код:
    .append('<img src="v.svg" alt="">')
     
    Sylon нравится это.