Подскажите JS. Запомнить раскрыт ли аккордеон.

Пнд, 09/01/2017 - 16:39

Поместил раскрыты фильтр в аккордеон таким вот нехитрым способом:

(function ($) {
 Drupal.behaviors.cool_themeTheme = {
  attach: function(context, settings) {
    $(".cool-filter .bef-select-as-checkboxes-fieldset").accordion({  
      active: false,
      collapsible: true,
      heightStyle: "content",      
      header: ".panel-heading"
    });      
  }
 };
 
})(jQuery);

Результат тут: http://bootstrap.liberty.vps-private.net/test
accordfilter
Проблема. Когда нажимаю на любое значение фильтра - аккордеон закрывается. Как сделать чтобы не закрывался?

Через куки? Если да - пробовал этими способами:
http://stackoverflow.com/questions/27142455/jquery-remember-open-accordion-state
http://stackoverflow.com/questions/14073260/setting-a-cookie-to-remember-accordion-state
http://stackoverflow.com/questions/11231436/jquery-ui-accordion-menu-saving-menu-state-even-after-refresh
не получилось :(

Как думаете, есть сверху ссылка на рецепт? Или вообще по другому делать?

0 Спасибо

Комментарии

Аватар пользователя ХулиGUN
3 months 2 недели назад ХулиGUN #

Никогда не пользовался юайными шняжками

0 Спасибо
Аватар пользователя BatKor
3 months 2 недели назад BatKor #

Наверно лучше событие ставить на тег legend
и вызывать $(this).parent().accordion... помоему

0 Спасибо
Аватар пользователя BatKor
3 months 2 недели назад BatKor #

Тогда у тега legend убрать паддинг и сделать у спана с классами panel-title fieldset-legend
типа

(function ($) {
 Drupal.behaviors.cool_themeTheme = {
  attach: function(context, settings) {
    $(".cool-filter .bef-select-as-checkboxes-fieldset ").on('click','span.panel-title.fieldset-legend', function(){
$(this).parent().parent().accordion({  
      active: false,
      collapsible: true,
      heightStyle: "content",      
      header: ".panel-heading"
    });    
  }
 };
 
})(jQuery);

типа такого

0 Спасибо
Аватар пользователя BatKor
3 months 2 недели назад BatKor #

со скобками могут быть ошибки

0 Спасибо
Аватар пользователя VasyOK
3 months 2 недели назад VasyOK #

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

0 Спасибо
Аватар пользователя ХулиGUN
3 months 2 недели назад ХулиGUN #
BatKor написал:
типа такого

То есть на клик по элементу ты только инициализируешь аккордион, да ещё и схлопнутый? Сегодня что, вечер знатоков js?
ТС, а к документации не пробовал обращаться? http://api.jqueryui.com/accordion/
Там же как раз активация описана

// Getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// Setter
$( ".selector" ).accordion( "option", "active", 2 );
0 Спасибо
Аватар пользователя ХулиGUN
3 months 2 недели назад ХулиGUN #

Посмотрел сайт... Так у тебя аяксом твои фильтры то обновляются... потом переинициализируются заново, а так как стоит active: false, то он инициализируется закрытым... Супер-мега костыль - определить глобальную переменную, на клик по любому значению фильтра эту переменную заменить на противоположное значение, а в код своей инициализации аккордиона добавить проверку на значение этой переменной...

0 Спасибо
Аватар пользователя VasyOK
3 months 2 недели назад VasyOK #

Хулиган (твой логин антимат фильтр не пускает), на пример подобного можешь ссылку кинуть? Не понимаю я на пальцах.

0 Спасибо
Аватар пользователя BatKor
3 months 2 недели назад BatKor #

Он имеет ввиду, что создавать глобальную переменную фиксирующую состояние аккордиона не правильно(Мега-костыль). Предлагает как я понимаю, что бы вы не обновляли форму с аккордионом при Ajax запросе.

0 Спасибо
Аватар пользователя Studio VIZA
3 months 2 недели назад Studio VIZA #
VasyOK написал:
Хулиган (твой логин антимат фильтр не пускает)

Ху лиGUN

0 Спасибо
Аватар пользователя gun_dose
3 months 2 недели назад gun_dose #

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

1 Спасибо
Аватар пользователя ХулиGUN
3 months 2 недели назад ХулиGUN #
VasyOK написал:
Хулиган (твой логин антимат фильтр не пускает)

Эт я знаю))) Так и задумано было. Чтоб меня не цитировали все кому не поподя)))

VasyOK написал:
на пример подобного можешь ссылку кинуть? Не понимаю я на пальцах.

Ну примеров нет - так как это друпальная фишка обновлять html bef аяксом после выбора значения фильтра.
Что происходит у тебя:
1. у тебя есть конструкция формы bef, которая аяксом перезагружается вся при выборе значения любого из фильтров
2. Есть твой скрипт, который инициализирует аккордион, только в его инициализации у тебя параметр active: false что сразу же скрывает твой аккордион
3. В момент выбора любого фильтра происходит "обновление" формы bef и соответственно твой аккордион заново переинициализируется с active: false
Возможные решения:
1. Нужно как-то запоминать твой раскрытый аккордион.
2. Для этого можно определить переменную в глобальной области видимости var checkerFilter = checkerFilter ? checkerFilter : {};
3. Затем повесить слушателя на клик по твоим фильтрам, который будет определять раскрыт ли аккордион и писать значение в твою глобальную переменную по индексу элемента.

$('.parent').on('click', '.children-accordion', function(){
    var $index = $('.parent .children-accordion').index(this); // индекс нашего аккордиона, по которому кликнули
    var active = $(this).accordion( "option", "active") // флаг активности элемента аккордиона. Возвращает false когда скрываем и 0 когда раскрываем
    checkerFilter[$index] = active; // Записываем значение в нашу переменную
})

4. Затем в конце своей инициализации аккордиона в цикле открываем нужные аккордионы

$.each(checkerFilter, function(indx, val){ // Проходимся в цикле по ключам и значениям нашей переменной-запоминалки
    $('.children-accordion').eq(indx).accordion('option', 'active', val); // Устанавливаем флаг активности
})

Но лично я, всякие эти аккордионы не использовал бы а просто триггерил класс, например open и в css просто бы описал каскады

0 Спасибо
Аватар пользователя ХулиGUN
3 months 2 недели назад ХулиGUN #
BatKor написал:
Он имеет ввиду, что создавать глобальную переменную фиксирующую состояние аккордиона не правильно(Мега-костыль).

Ну глобальные переменные вообще зло, и да, это мега костыль

BatKor написал:
Предлагает как я понимаю, что бы вы не обновляли форму с аккордионом при Ajax запросе.

Нипалучицо - фича bef)))

gun_dose написал:
Надо при выборе опции родителю давать класс, который будет обозначать раскрытость по умолчанию.

Тоже не выйдет))) Перезагружается вся форма)))

Друпал такой друпал

0 Спасибо