html 代码
<body>
<ul>
<li><span>第一个标题</span><div><p>3434</p><p>3434</p></div></li>
<li><span>第二个标题</span><div><p>3434</p><p>3434</p></div></li>
<li><span>第三个标题</span><div><p>3434</p><p>3434</p></div></li>
<li><span>第四个标题</span><div><p>3434</p><p>3434</p></div></li>
</ul>
<button>清除缓存</button>
<script>
$(document).ready(function(){
var zz=[1,1,1,1];
var getdiv=$(‘ul li’);
//判断是否弹开(读取localstroage)
setlocalStorage();
function setlocalStorage(){
if(localStorage.site==undefined){
console.log("为空")
localStorage.setItem("site", zz);
}else{
console.log("不为空")
console.log("site:"+localStorage.site);
var ss=localStorage.site;
ss.split(",").forEach(function(e,index){
if(e==0){
getdiv[index].lastChild.style.display=’none’;
}else{
getdiv[index].lastChild.style.display="block";
}
})
}
}
//清除缓存值
$(‘button’).click(function(){
localStorage.removeItem(‘site’);
})
//点击后改变localStroage(存储localstroage)
function getli(){
var localarry=[];
for(i=0;i<getdiv.length;i++){
if(getdiv[i].lastChild.style.display==’none’){
localarry[i]=0;
}else{
localarry[i]=1;
}
}
localStorage.setItem(‘site’,localarry);
setlocalStorage();
}
//点击效果
$(‘li span’).click(function(){
if($(this).next().css("display")==’none’ ){
$(this).next().css(‘display’,’block’)
}else{
$(this).next().css(‘display’,’none’)
}
getli();
})
})
</script>
</body>
</html>
评论前必须登录!
注册