Question

我希望这可以与 slidetoggle 一起使用，但无法使其正常工作：

如果使用上述小提琴重新加载页面，则会保存切换状态。这样才行！但现在我想用这个show hide函数制作一个漂亮的动画。

$('.a').click(function(){
$(".target").toggle();
var isVisible = $('.target').is(":visible"); 
localStorage.setItem('visible', isVisible);
});
// stored in localStorage as string, `toggle` needs boolean
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$('.target').toggle(isVisible);

body {padding:30px;}

.target {
  background:#9D0053;
  height:160px;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="a">Button</button>
<div class="target"></div>

Answer 1

这取决于您想要的动画类型，但一个简单的解决方案是使用slideToggle()

$('.a').click(function() {
  $(".target").slideToggle(function() {
    localStorage.setItem('visible', $(this).is(":visible"));
  });
});

$('.target').toggle(localStorage.getItem('visible') === 'true');

Working example

另请注意，我简化了localStorage属性逻辑

使用动画在localStorage中存储JS切换

1 个答案: