Как решить проблему с переводом элементов с табов на аккордеон при ресайзе окна?

Question

[deniskins23]

Доброго времени суток. Суть вопроса в том, что есть элементы на странице. Дизайнер извращенец сделал их так,что на лэптопе они просто карточками, на таблетке они табами, а на мобайле они уже аккордеоном должны сделать. По идее сверстать это все получилось и по идее в js тоже вроде все работает и написано норм.на разных экранах и и так как надо. Проблема только в одном, если не перезагружать страницу и ресайзить окно, то как только элементы должны менять свое представление(становиться аккордеоном например), то все перестает работать до тех пор, пока страницу не перезагрузишь..Подскажите плиз, как решить этот вопрос?
И еще сразу из этого есть еще вопрос - а как возможно через js связать элементы на разных страницах?вот например эти услуги на главной странице в таком виде в каком они и есть(карточка, таб, аккордеон). И есть еще страница "услуг", на ней услуги представлены в том же виде, но чуть более подробное описание. Так вот как сделать, чтобы по клику на главной странице на "подробнее" на определенной услуге, был переход на страницу услуг и при этом на ней было открыто подробное описание именно той услуги, которую выбрал пользователь на главной?Это возможно сделать через js? если да, то как?
Вот пример как это выглядит https://jsfiddle.net/nyz2ko0w/

Comments

[sergski]

По событию ресайз перезагрузжайте страницу.
Запишите куки и на нуженой странице проверяте их, если тру, то делайте активной данную услугу.

[deniskins23]

а без перезагрузки страницы не решить вопрос?может есть мысли?

[Сергей delphinpro]

deniskins23, собственно там и ресайз слущать не нужно. Просто все условия поместите в единственного слушателя клика

$('.tabs__link').on('click', function(e){

  // тут проверяйте размеры окна/экрана и делайте прочие нужные вещи

});

[deniskins23]

Сергей delphinpro, это и было изначально сделано..но не работает.Есть баги что в варианте предложенном вами,что в том, что написан мной выше..Поэтому и спросил.ВОт на фидле код, сможете подправить так, чтобы работал?максимум чего я добился это чтобы именно на точке скажем 480px он сбрасылвал стили и делал все норм, но слишком медленный ресайз это нереально, это не продакш..Сможете помочь?

[Сергей delphinpro]

deniskins23, ну вот для примера https://jsfiddle.net/nyz2ko0w/3/
Дальше сам.

[deniskins23]

Сергей delphinpro, Сергей, суть в том, что сами аккордеон и табы работают норм.Проблема именно при ресайзе возникает. По логике - когда происходит ресайз и он доходит до определенного брейкоинта(например 640px), должно смениться представление с табов на аккордеон, и по идее оно меняется, но проблема в активной вкладке.Она должна скидываться и активной должна становиться первая или оставаться так же, но она пропадает с экрана. Если ты поресайзишь, то поймеim в чем проблема. И тоже самое в обратном случае с увеличением окна.Я ставил условие на изменение ширины через js, но оно работает не корректно или вообще не работает(по всякому пробовал).почему так происходит не пойму. Поэтому и задал вопрос. Есть варианты решения?или может видишь проблему?

[Сергей delphinpro]

deniskins23, Я тебе показал пример со сбросом аккордеона при увеличении ресайза. Дальше аналогично допиливается.

[deniskins23]

Сергей delphinpro, А основная проблема видна именно на mobile экране.Тайтл(назовем его так) при ресайзе остается подсвечен синим как на активе, но описание пропадает, при этом если кликнуть на него два раза, то все работает норм. и по ресайзе на увеличение актив просто пропадает(синего цвета на вкладке нет).

[deniskins23]

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

[Сергей delphinpro]

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

[deniskins23]

Сергей delphinpro, Ок, экран больше 480, выбираем определенную услугу - у нас табы..уменьшаем экран, превращаются табы в аккордеон.выбранная услуга подсвечена синим, но итем закрыт, а как сделать, чтобы он оставался открытым?проблема в этом.Я исхожу из твоего кода на фидле

[deniskins23]

Сергей delphinpro, Спасибо тебе за помощь и терпение.-)

[Сергей delphinpro]

Могу на словах сказать. Перестань лазить по DOM на каждый чих. Задайте состояние компонента, единый источник истины, на основе которого будут отрисовываться все вкладки/табы. При изменении состояния перезапускайте функции перерисовки (в вашем случае смена классов и скрытие блоков). Таким состоянием может быть объект данных {activeIndex:1, viewAs:'tabs'}. Если к свойствам еще подцепить геттеры и сеттеры, то в сеттере можно будет запускать перерисовку, и для смены режима отображения достаточно будет просто присвоить новое значение свойству объекта.
Т.е. примерно так

var state = { ..... };
mql480lt.addListener(function (mq){
  if (mq.matches) state.viewAs = 'accordion';
});
mql480_780.addListener(function (mq){
  if (mq.matches) state.viewAs = 'tabs';
});
mql780gt.addListener(function (mq){
  if (mq.matches) state.viewAs = 'cards';
});

и по кликам на табы

.on('click',e=>state.activeIndex=e.target.dataset.index);

[deniskins23]

Сергей delphinpro, Чуть не написал - а по русски(хотя большую часть понял)?Я не на столько силен в js..я больше по верстке.Просто какой-то вымораживающий момент попался..Последняя просьба - если не трудно, можешь подправить это в коде?Буду безмерно просто благодарен!и +1 к ауре добра..

[Сергей delphinpro]

deniskins23, обновил последний коммент.
Ладно, в перерыве будет время, накидаю полный пример.

[deniskins23]

Сергей delphinpro, огроменное спасибо тебе!!буду ждать с нетерпением..так я по коду смогу врубиться что к чему..чтобы на будущее знать...

[deniskins23]

Сергей delphinpro, Ну как, не смотрел еще?Сорри, что напоминаю..

[deniskins23]

Сергей delphinpro, Сергей, ну как, не появилось свободной минутки?

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/LgRbGW

Comments

[deniskins23]

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