Question

我正在使用LocalStorage来打开/关闭切换横幅。不幸的是，我无法正确地在横幅的切换#button上保持一个开放的类来相应地改变它的样式。

我的代码：

$('#button').click(function () {
    $(this).siblings().slideToggle(function() {
    localStorage.setItem('display', $('#banner').is(':hidden'));
    });
});
var block = localStorage.getItem('display');
if (block == 'true') {
    $('#banner').hide()
}

我的HTML

<div id="banner_container">
    <div id="banner">
        <img src="#">
    </div>
    <button id="button" href="javascript:void(0);"></button> <!-- toggle 'open' class if banner is visible / hidden and keep it in LocalStorage -->
</div>

我尝试将toggleClass（$(this).toggleClass('open');）设置为slideToggle函数，但这似乎不是正确的方法，因为它与LocalStorage行为无关。有什么建议吗？

Answer 1

将javascript包装在jquery文档就绪调用中。您的问题是，在DOM呈现banner元素之前，要隐藏横幅的javascript正在执行：

$(document).ready(function() {
  $('#button').click(function () {
      $(this).siblings().slideToggle(function() {
      localStorage.setItem('display', $('#banner').is(':hidden'));
      });
  });
  var block = localStorage.getItem('display');
  if (block == 'true') {
      $('#banner').hide()
  }
});

小提琴：https://jsfiddle.net/fcewjh7a/3/

Answer 2

通过切换'activeClass'或'open'并检查文档加载是否存在来解决问题。

$(document).ready(function() {
  $('#button').click(function() {
    $(this).siblings().slideToggle(function() {
      localStorage.setItem('display', $('#banner').is(':hidden'));
    });
  });
  var block = localStorage.getItem('display');
  if (block == 'true') {
    $('#banner').hide()
  }
});
$(document).ready(function() {
  $('#button').click(function() {
    $('#button').toggleClass('activeClass');
  });
});
$(document).ready(function() {
  if (!$('#banner').is(':hidden')) {
    $('#button').addClass('activeClass');
  } else if (!$('#banner').is(':visible')) {
    $('#button').removeClass('activeClass');
  }
});

JSFiddle：https://jsfiddle.net/fcewjh7a/17/

LocalStorage无法添加课程＆＃39; open＆＃39;并保持它

2 个答案: