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

Sylon

Постоялец
Регистрация
1 Мар 2015
Сообщения
322
Реакции
153
Всем привет! Помогите, пожалуйста, придумать как корректно добавить класс к аккордеону. Чтобы добавить знак открытой закрытой вкладки. Ниже код, он присваивает функцию клику, если она не срабатывает, то запускается открытие вкладки. Это нужно для того, чтобы проверять есть ли вложение в списке, если нет, то работает как ссылка. 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>
 
Код:
$('.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();
    }
});
 
Код:
$('.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();
    }
});
А если снова нажать и вкладки закроются, что тогда будет? Просто .slideToggle() он получается универсальный, если было открыто, закроет и наоборот.
 
А если снова нажать и вкладки закроются, что тогда будет? Просто .slideToggle() он получается универсальный, если было открыто, закроет и наоборот.
эту конструкцию я не трогал, я просто добавил для открытой вкладки класс opened. При закрытии класс удаляется
 
Подскажите, пожалуйста, как сделать так, чтобы иметь оба класса для закрытой вкладки и открытой соответственно. И чтобы класс присваивался только если есть вложение во вкладке. А то html разметка может меняться по мере добавления и удаления категорий в админ-панели.
 
Подскажите, пожалуйста, как сделать так, чтобы иметь оба класса для закрытой вкладки и открытой соответственно. И чтобы класс присваивался только если есть вложение во вкладке. А то html разметка может меняться по мере добавления и удаления категорий в админ-панели.
зачем два класса то?
Это уже стилями делается.
Для просмотра ссылки Войди или Зарегистрируйся

Просто с классом opened переназначай стили
 
зачем два класса то?
Это уже стилями делается.
Для просмотра ссылки Войди или Зарегистрируйся

Просто с классом opened переназначай стили
Ну а если такой момент, видим 4 вкладки, только в одной есть вложение, и только на ней стрелочка вниз, а когда ее нажимаем, стрелочка вверх показывает? Как такое сделать, если нет постоянной html разметки и вложение то есть, то нет.
С этой точки зрения поэтому скрипт так и выглядит, чтобы при нажатии на li > a если нет вложения, то срабатывает уже функции аккордеона. Прошу прощения, если сумбурно описываю, пытаюсь себе меню сделать, но опыта нет. Направьте, пожалуйста, в нужном направлении. Очень много вариаций в инете, от этого мало, что понятно даже со справочником.
 
Последнее редактирование:
Доработал
Код:
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();
    }
});
Для просмотра ссылки Войди или Зарегистрируйся

Где
Код:
$(arrow).parent().append('V');
доделываешь под себя
 
Доработал
Код:
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();
    }
});
Для просмотра ссылки Войди или Зарегистрируйся

Где
Код:
$(arrow).parent().append('V');
доделываешь под себя
Посмотрите, пожалуйста, всё верно работает, остаётся только в css сделать оформление и вместо "V" будет svg знак на одном месте, только поворачиваться на 180 градусов при открытии вкладки? Для просмотра ссылки Войди или Зарегистрируйся Скажите, пожалуйста, а как .append('V') сделать не выводящим текст, а знак?
 
Последнее редактирование:
Посмотрите, пожалуйста, всё верно работает, остаётся только в css сделать оформление и вместо "V" будет svg знак на одном месте, только поворачиваться на 180 градусов при открытии вкладки? Для просмотра ссылки Войди или Зарегистрируйся Скажите, пожалуйста, а как .append('V') сделать не выводящим текст, а знак?
Код:
.append('<img src="v.svg" alt="">')
 
Назад
Сверху