显示默认隐藏的 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();
});

一般来说，最好将模型(数据(与视图(渲染(分开，就像我上面所做的那样。 意大利面很难保养。