保存状态弹性菜单后重新加载

Question

我试图保存页面重新加载后的Flex菜单的最后一个活动状态。 的localStorage的功能似乎并没有工作...

var $elements = $('li.b-accordion__cell'); 

$elements.click(function() { 
    localStorage.activeItem = $elements.index(this); 
}); 

$(document).ready(function() { 
    if (localStorage.activeItem) { 
     $elements 
      .get(localStorage.activeItem) 
      .css({ 
       'flex': '3' 
      }); 
    } 
}); 

See Codepen here

Answer 1

尝试包裹在doc整个事情的准备，也许元素尚未创建点击处理程序被添加到他们，制作它，因为它的工作一个答案...... [此处输入链接的描述] [1]

Updated Codepen

$(document).ready(function() { 
 
    var $elements = $('li.b-accordion__cell'); 
 

 
$elements.click(function() { 
 

 
    $(this).css({ 
 
    'flex': '3' 
 
    }); 
 

 
    $elements.not(this).css({ 
 
    'flex': '1 3' 
 
    }); 
 
}); 
 

 

 

 

 

 
var $elements = $('li.b-accordion__cell'); 
 

 
$elements.click(function() { 
 
    localStorage.activeItem = $elements.index(this); 
 
}); 
 

 

 
    if (localStorage.activeItem) { 
 
$($elements.get(localStorage.activeItem)) 
 
    .css({ 
 
     'flex': '3' 
 
    }); 
 
    } 
 
});

body { 
 
    padding: 0 0px;} 
 

 
.b-accordion { 
 
    display: flex; 
 
    width: 600px; 
 
    height: 200px; 
 
    padding: 0; 
 
    margin: 0; 
 
    flex-wrap: row nowrap;} 
 

 
.b-accordion__cell { 
 
    padding: 16px; 
 
    overflow: hidden; 
 
    transition: flex 0.3s; 
 
    flex: 1 3;} 
 

 
.b-accordion__cell: { 
 
    flex: 3;} 
 

 
a {color: white !important;} 
 

 
.b-accordion__cell:nth-child(1) { 
 
    background: red;} 
 

 
.b-accordion__cell:nth-child(2) { 
 
    background: blue;} 
 

 
.b-accordion__cell:nth-child(3) { 
 
    background: green;} 
 

 
.b-accordion__content { 
 
    position: relative; 
 
    display: block; 
 
    color: black; 
 
    width: 600px;} 
 

 
.b-accordion__content__title { 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 0; 
 
    display: block; 
 
    width: 300px; 
 
    transform-origin: 0 0 0;} 
 

 
.b-accordion__content__text { 
 
    padding-left: 0px; 
 
    padding-top: 75px; 
 
    font-size: 20px; 
 
    margin: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="b-accordion"> 
 

 
<li class="b-accordion__cell"> 
 
    
 
<article class="b-accordion__content"> 
 
    <h3 class="b-accordion__content__title">Section 1</h3> 
 
    <p class="b-accordion__content__text"> 
 

 
    <a href="/tagged/tag1">tag1</a> 
 
    <a href="/tagged/tag2">tag2</a> 
 
    <a href="/tagged/tag3">tag3</a> 
 
    <a href="/tagged/tag4">tag4</a> 
 
    <a href="/tagged/tag5">tag5</a> 
 
     
 
    </p> 
 
</article> 
 
</li> 
 
    
 
    
 
    <li class="b-accordion__cell"> 
 
    <article class="b-accordion__content"> 
 
     <h3 class="b-accordion__content__title">Section 2</h3> 
 
     <p class="b-accordion__content__text"> 
 
     
 
    <a href="/tagged/tag6">tag6</a> 
 
    <a href="/tagged/tag7">tag7</a> 
 
    <a href="/tagged/tag8">tag8</a> 
 
    <a href="/tagged/tag9">tag9</a> 
 
    <a href="/tagged/tag10">tag10</a> 
 
        
 
     </p> 
 
    </article> 
 
    </li> 
 
    <li class="b-accordion__cell"> 
 
    <article class="b-accordion__content"> 
 
     <h3 class="b-accordion__content__title">Section 3</h3> 
 
     <p class="b-accordion__content__text"> 
 
     
 
    <a href="/tagged/tag11">tag11</a> 
 
    <a href="/tagged/tag12">tag12</a> 
 
    <a href="/tagged/tag13">tag13</a> 
 
    <a href="/tagged/tag14">tag14</a> 
 
    <a href="/tagged/tag15">tag15</a> 
 
     
 
     
 
     </p> 
 
    </article> 
 
    </li> 
 
    
 
</ul>

Answer 2

创造这种手风琴的出色工作。我爱它！你很亲密。 代替使用赋值运算符：

localStorage.activeItem = $elements.index(this); 

使用.setItem（）方法。

localStorage.setItem("activeItem", $elements.index(this)); 

Forked your PEN here

和平的