重新加载后保存状态flex菜单

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

创造这种手风琴的伟大工作。我喜欢它！你是如此亲密。 而不是使用赋值运算符：

def text = new FileInputStream("config.properties").getText("UTF-8")

使用.setItem（）方法。

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

Forked your PEN here

和平所有