0

Меня интересует, возможно ли сделать так, чтобы при загрузке страницы, блок уже был закрытым, если он был скрыт ранее.

То есть, у меня есть блок:

<div class="sliderBlock">
    <div>....some info....</div>
</div><!-- .sliderBlock -->

В этом блоке есть кнопка, которая может его свернуть и развернуть до определенных размеров. А именно, открытый блок: 350 px, свёрнутый блок: 50 px;

Допустим, я открыл главную страницу и скрыл этот блок. Как мне сделать так, чтобы при переходе на другие страницы, этот слайдер был всё так же свёрнут без каких либо видимых пользователю действий?

Я пробовал сделать следующее:

$(document).ready(function(){
   var storage = $.localStorage;

   if (storage.get('_slider') == 'hide') {
        sliderBlock.css({'height': '50px'});
        hideSlider.css({'transform': 'rotate(-45deg)'})
    }
});

Использовал локальное хранилище для проверки. Значение _slider может быть пустым или принимать значение show, это значит что блок открытый, либо принимать значение hide - блок закрытый.

Когда то всё работало без видимых действий. Но сейчас почему-то загружает страницу, и блок от полного размера сворачивается до 50 px.

Может кто посоветует как решить эту проблемку?

1 ответ 1

1

Скорее всего проблема в том, что изначально (до загрузки скриптов) у тебя развернутое состояние у блока (в стилях).

Позже, когда твоя страница загрузится, т.е. вызовется обработчик на $(document).ready блок проходит проверку и скрывается.

Возможные решения:

  1. Изменить изначальное состояние твоего блока, пусть он до загрузки всегда будет свёрнут, а после загрузки - показывается, или нет.
  2. Не дожидаться загрузки jquery и других скриптов (написать пару строк javascript без jquery)
  3. Использовать вместо localStorage - cookie. Тогда будет возможность на сервере (перед отрисовкой страницы) задать блоку нужное состояние.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.