При обновлении страницы свернутое меню мелькает на долю секунды
Добрый день Всем! На сайте mm3.ru есть меню с левой стороны. Изначально оно раскрыто и широкое. Так и должно быть. Потом мы его сворачиваем по клику (.х_block). Его свернутость сохраняется и при обновлении страницы тоже методом (localStorage) это тоже все отлично, НООО!!! только когда меню свернуто и мы обновляем страницу, это меню мелькает и становится развернутое, а потом снова закрытое/свернутое. Проблема именно в этом мелькании. ....ПС Поступил 1 ответ. Но проблема все еще актуально. Прошу помощи!!!
Меню находится в сайдбаре. У него класс .col-md-3 .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } При сворачивание меняется класс на .col-md-1 .col-md-1 { -ms-flex: 0 0 3.333333% !important; flex: 0 0 3.333333% !important; max-width: 3.333333%!important; padding:0!important; } Метод: $(function(){ $('.х_block').click(function(){ $('.left_block').toggleClass('col-md-1'); localStorage.setItem("blockIsActive", $('.left_block').hasClass('col-md-1')); }); var blockIsActive = localStorage.getItem("blockIsActive"); if (blockIsActive == "true") { $('.left_block').addClass('col-md-1'); $('.left_block').removeClass('col-md-3'); } }); Пробовал в DOM добавлять атрибуты ширины классу .col-md-1 style="max-width" - только этот атрибут к диву не добавляется. Мысли: Понимаю что изначально страница загружается и берет код HTML, а затем подгружаются измененные стили. НЕ могу прощупать логику, кто сталкивался с этой проблемой!??? Очень надеюсь на Вас ГУРУ!!!! ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО. |
Какая то путаница (или я чего то не понял)
Блок считается активным (blockIsActive == "true") когда у него класс .col-md-1?. Т.е когда он узкий? Короче, при загрузке всегда загружай узкий. Можешь даже поставить ему атрибут hidden, а потом убрать А потом уже, если надо, расширяй. Проверяй, если это первая загрузка, то в localStorage ничего не будет, делай его широким (так кажется должно быть), ну или таким, какой был до перезагрузки. |
В том, то и дело, что при первой загрузке сайта блок должен быть раскрыт, то есть широкий. А потом при клике свернуть он сворачивается. А потом если страница обновляется свернутость блока сохраняется, но мелькает. Как я уже написал раскрывается сначала потом сворачивается. Повторяю изначально необходимо чтобы блок был открыт. Это так и происходит все правильно, потом мы его сворачиваем при необходимости. И дальше работаем на сайте и обновляем страницы, но блок мелькает.
|
miha2020,
так скройте по умолчанию, если метка не равна false откройте блок. |
Цитата:
Цитата:
заменить на if (blockIsActive != "false") { $('.left_block').addClass('col-md-3'); $('.left_block').removeClass('col-md-1'); } |
miha2020,
блоку присвоить col-md-1, col-md-3 убрать. $(function(){ $('.х_block').click(function(){ $('.left_block').toggleClass('col-md-1 col-md-3'); localStorage.setItem("blockIsActive", $('.left_block').hasClass('col-md-1')); }); var blockIsActive = localStorage.getItem('blockIsActive'); if (blockIsActive != "false") $('.left_block').trigger('click'); }); |
Манипуляции проведу вечером. СПАСИБО ВАМ большое ЗА ПОДРОБНЫЙ ОТВЕТ
|
Проблема не решена. Меню мелькает теперь в самом начале. Вернул все обратно.
|
.hidemenu {
display:none; } Ставите своему блоку в html этот класс. Когда страница загружена, убираете $(function(){ $('.х_block').click(function(){ $('.left_block').toggleClass('col-md-1 col-md-3'); localStorage.setItem("blockIsActive", $('.left_block').hasClass('col-md-1')); }); var blockIsActive = localStorage.getItem('blockIsActive'); if (blockIsActive != "false") $('.left_block').trigger('click'); $('.left_block').removeClass( "hidemenu" ) }); |
Пробовал blockIsActive !== "false" сделать изначально его свернутым но раскрывать при загрузке. Все получается в точности наоборот. Когда свернутое меню при обновлении не скачет. Но скачет при первой загрузке от изначально свернутого до развернутого.
Так же скачет логотип...потому что скачет боковое меню. |
Часовой пояс GMT +3, время: 00:24. |