显示默认情况下隐藏的div

Question

我有一个显示/隐藏div的脚本。这是代码：

 $('#container2').toggleClass(localStorage.toggled);

/* Toggle */
$('.bar-toggle').on('click',function(){

   //localstorage values are always strings (no booleans)  

   if (localStorage.toggled != "with_toggle" ) {
      $('#container2').toggleClass("with_toggle", true );
      localStorage.toggled = "with_toggle";
   } else {
      $('#container2').toggleClass("with_toggle", false );
      localStorage.toggled = "";
   }

});

我想默认隐藏div。我该如何修改？

Answer 1

由于您的问题未指定，我可以想到几个答案。由于您首先包含了本地存储，因此我假设with_toggle类将导致显示div，而您只需要正确地应用默认的切换值（null）即可。

function applyToggle() {
    // JS uses "truthy" booleans - "" and null will be interpreted as false,
    // and "with_toggle" will be interpreted as true.
    $('#container2').toggleClass("with_toggle", localStorage.getItem('toggled'));
}
applyToggle();

/* Toggle */
$('.bar-toggle').on('click', function() {
    //localstorage values are always strings (no booleans)
    localStorage.setItem('toggled', localStorage.getItem('toggled') ? "" : "with_toggle");
    applyToggle();
});

通常来说，像上面一样，将模型（数据）与视图（渲染）分开是个好主意。意大利面很难维护。