Восстановить css свойство div - PullRequest
Новая
       22

Восстановить css свойство div

2 голосов
/ 23 октября 2019

Я пытаюсь восстановить свойство отображения (none или block) из div после обновления моего сайта. У меня есть несколько div с этим классом, но имеют уникальный идентификатор. Внутри этих div есть несколько флажков, которые обновляют сайт после того, как они отмечены / сняты.

Вот jsfiddle : https://jsfiddle.net/074jatfs/2/

Это моя боковая панель с моим дивоми флажки: 

<div class="filter-panel filter--property facet--property" data-filter-type="value-list" data-field-name="f">
   <div class="filter-panel--flyout" style="border:none;"><div id="label-it" class="label-it"><label class="filter-panel--title"><h3>Filter Group 1</h3></label></div>
   <div class="filter-panel--content" id="FilterGroup1">
      <ul class="filter-panel--option-list" style="list-style-type:none;">
         <li class="filter-panel--option">
            <div class="option--container" style="display:block;">
            <span class="filter-panel--checkbox"><input type="checkbox" value="603"><span class="checkbox--state">&nbsp;</span>
            </span>
            <label>Filter 1</label>
         </div>
         </li>
         <li class="filter-panel--option">
            <div class="option--container" style="display:block;">
            <span class="filter-panel--checkbox"><input type="checkbox" value="613"><span class="checkbox--state">&nbsp;</span>
         </span>
             <label>Filter 2</label>
         </div>
         </li>
         </ul>
         </div>
         </div>
         <div class="filter-panel filter--property facet--property" data-filter-type="value-list" data-field-name="f">
   <div class="filter-panel--flyout" style="border:none;"><div id="label-it" class="label-it"><label class="filter-panel--title"><h3>Filter Group 2</h3></label></div>
   <div class="filter-panel--content" id="FilterGroup2">
      <ul class="filter-panel--option-list" style="list-style-type:none;">
         <li class="filter-panel--option">
            <div class="option--container" style="display:block;">
            <span class="filter-panel--checkbox"><input type="checkbox" value="603"><span class="checkbox--state">&nbsp;</span>
            </span>
            <label>Filter 3</label>
         </div>
         </li>
         <li class="filter-panel--option">
            <div class="option--container" style="display:block;">
            <span class="filter-panel--checkbox"><input type="checkbox" value="613"><span class="checkbox--state">&nbsp;</span>
         </span>
             <label>Filter 4</label>
         </div>
         </li>
         </ul>
         </div>
         </div>
         <div class="filter-panel filter--property facet--property" data-filter-type="value-list" data-field-name="f">
   <div class="filter-panel--flyout" style="border:none;"><div id="label-it" class="label-it"><label class="filter-panel--title"><h3>Filter Group 3</h3></label></div>
   <div class="filter-panel--content" id="FilterGroup3">
      <ul class="filter-panel--option-list" style="list-style-type:none;">
         <li class="filter-panel--option">
            <div class="option--container" style="display:block;">
            <span class="filter-panel--checkbox"><input type="checkbox" value="603"><span class="checkbox--state">&nbsp;</span>
            </span>
            <label>Filter 5</label>
         </div>
         </li>
         <li class="filter-panel--option">
            <div class="option--container" style="display:block;">
            <span class="filter-panel--checkbox"><input type="checkbox" value="613"><span class="checkbox--state">&nbsp;</span>
         </span>
             <label>Filter 6</label>
         </div>
         </li>
         </ul>
         </div>
         </div>

При нажатии на div label-it div filter-panel--content переключается с display:block на display:none и наоборот (display:none на display:block)

На данный момент я хочу сохранить текущее свойство display и восстановить его при обновлении сайта.

Это моя первая попытка sessionStorage свойства, которое я пыталсяустановите его в функции переключения: 

$('.label-it').click(function() {

  $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").toggle(350)

sessionStorage.setItem("filterstate", $("#FilterGroup1").css("display"));

});

Чтобы восстановить filterstate Я пробовал это: 

$(document).ready(function () {
    sessionStorage.getItem("filterstate");
    if (sessionStorage.getItem("filterstate"))
    {
        $("#FilterGroup1").css("display", sessionStorage.getItem("filterstate"));
    }
});

Я не могу восстановить свойство css, кто-то может мне помочь? Пожалуйста.

1 Ответ

1 голос
/ 23 октября 2019

Вместо этого вам нужно попытаться сохранить значение display для div, который фактически переключен, а не его родителя. 

sessionStorage.setItem("filterstate", $("#FilterGroup1 .option--container").css("display"));
...