сохранение положения открыт/закрыт блока в localStorage.
Всем Привет!
имеется скрипт: $('.collapse-link').on('click', function () { var ibox = $(this).closest('div.ibox'); var button = $(this).find('i'); var content = ibox.children('.ibox-content'); content.slideToggle(200); button.toggleClass('fa-arrows-v').toggleClass('fa-arrows-v'); ibox.toggleClass('').toggleClass('border-bottom'); setTimeout(function () { ibox.resize(); ibox.find('[id^=map-]').resize(); }, 50); var info; if(content.css("display") == none) { info = none; } else { info = ok; } localStorage.setItem(ibox.id,info); }); html блока: <div class="ibox"> <span class="collapse-link"> <div class="ibox-title"> <h5 style="">Title</h5> <div class="ibox-tools"> <i class="fa fa-arrows-v"></i> </div> </div> </span> <div id="block-1" class="ibox-content"> Text </div> </div> И собственно скрипт при загрузке страницы: $(document).ready(function() { var block1 = localStorage.getItem('block-1'); if(block1 == none) { var ibox = getElementById("block-1"); ibox.addClass("block-hide"); } else: { continue; } }); На сайте имеются несколько блоков, состоящих из Заголовка и Контента. Первоначально, при заходе на сайт пользователь видит и текст и заголовок. При клике(onClick скрипт) контент скрывается, при повторном - открывается. Я сохраняю в localStorage id блока и его текущее состояние. Далее при перезагрузке страницы я проверяю положение блока(открыт/закрыт), если он был скрыт(info = none) я добавляю class с display:none и скрываю его, в противном случае не делаю ничего. Js изучаю недавно, поэтому с большего хочу с этим разобраться, нежели просто получить ответ:) . Сам onClick скрипт без сохранения открыт/закрыт рабочий. В localStorage храниться массив из id+info. |
Sonic911, в чем вопрос?)
ps. "none" и "ok" в строчках 15 и 19,13 соответственно нужно в кавычки занести, т.к. таких переменных вы скорее всего не создавали. Что вы хотели сделать этой операцией? ibox.toggleClass('').toggleClass('border-bottom'); Большинство методов jq возвращают ссылку на саму себя, поэтому строки 9-10 можно переписать так: ibox.resize().find('[id^=map-]').resize(); //можно еще так попробовать: ibox.find('[id^=map-]').addBack().resize(); Взаимодействие с localStorage лучше всего оборачивать в try catch, т.к. операция может завершиться фейлом по разным причинам. После "else" двоеточие не ставится. Если используете jQuery, то используйте его везде. var ibox = getElementById("block-1"); ibox.addClass("block-hide"); //с jq: $("#block-1").addClass("block-hide"); |
Вопрос в том, что все это не работает. Не сохраняет положение блока и + не отображает на странице ничего, собственно кроме этого блока)
toggleClass грубо говоря добавляет класс border-bottom, брал из примера, не знаю, честно говоря, почему не addClass. По поводу строчки с resize(): весь код до var info рабочий, проверял отдельно, без сохранения положения. |
Sonic911,
что такое Цитата:
|
в строке info = "none" - строка в которой я забыл кавычки поставить:)
В "display" == none - параметр style="display:none" |
|
Спасибо за пример, посмотрю. Как я понял, пример написан не через localStorage, а через печеньки. Возник вопрос, что лучше?) P.s Вопрос актуален
|
Sonic911,
лучше то, что вам проще. |
Часовой пояс GMT +3, время: 20:40. |