JavaScript本地存储与滑动下拉

Question

我在一个网站上工作，我是javascript的新手。我有6个按钮，当他们按下，他们滑动下拉向下与数据在它。当一个按钮被按下时，它会收缩所有其他按钮，以占用相同的空间。它工作得很好，这是我用javascript知识所能做的一切。现在，我需要这些下拉菜单来记住它们在使用本地存储刷新页面时所处的位置。我在网上找到了一些本地存储的例子，但在过去的几天里，我尝试了大约30个，却无法满足我的需求。我真的很纠结于如何在页面刷新时结合本地存储来记住这些下拉框的位置。

$(document).ready(function() {
$("#flippy2").click(function() {
$("#flippanel2").slideToggle("normal");
if ($("#flippanel")[0].style.display != "none") {
$("#flippanel").slideToggle();
}
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
if ($("#flippanel4")[0].style.display != "none") {
$("#flippanel4").slideToggle();
}
if ($("#flippanel5")[0].style.display != "none") {
$("#flippanel5").slideToggle();
}
if ($("#flippanel6")[0].style.display != "none") {
$("#flippanel6").slideToggle();
}
if ($("#flippanel7")[0].style.display != "none") {
$("#flippanel7").slideToggle();
}
if ($("#flippanel8")[0].style.display != "none") {
$("#flippanel8").slideToggle();
}
if ($("#flippanel9")[0].style.display != "none") {
$("#flippanel9").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy3").click(function() {
$("#flippanel3").slideToggle("normal");
if ($("#flippanel4")[0].style.display != "none") {
$("#flippanel4").slideToggle();
}
if ($("#flippanel5")[0].style.display != "none") {
$("#flippanel5").slideToggle();
}
if ($("#flippanel6")[0].style.display != "none") {
$("#flippanel6").slideToggle();
}
if ($("#flippanel7")[0].style.display != "none") {
$("#flippanel7").slideToggle();
}
if ($("#flippanel8")[0].style.display != "none") {
$("#flippanel8").slideToggle();
}
if ($("#flippanel9")[0].style.display != "none") {
$("#flippanel9").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy4").click(function() {
$("#flippanel4").slideToggle("normal");
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
if ($("#flippanel5")[0].style.display != "none") {
$("#flippanel5").slideToggle();
}
if ($("#flippanel6")[0].style.display != "none") {
$("#flippanel6").slideToggle();
}
if ($("#flippanel7")[0].style.display != "none") {
$("#flippanel7").slideToggle();
}
if ($("#flippanel8")[0].style.display != "none") {
$("#flippanel8").slideToggle();
}
if ($("#flippanel9")[0].style.display != "none") {
$("#flippanel9").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy5").click(function() {
$("#flippanel5").slideToggle("normal");
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
if ($("#flippanel4")[0].style.display != "none") {
$("#flippanel4").slideToggle();
}
if ($("#flippanel6")[0].style.display != "none") {
$("#flippanel6").slideToggle();
}
if ($("#flippanel7")[0].style.display != "none") {
$("#flippanel7").slideToggle();
}
if ($("#flippanel8")[0].style.display != "none") {
$("#flippanel8").slideToggle();
}
if ($("#flippanel9")[0].style.display != "none") {
$("#flippanel9").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy6").click(function() {
$("#flippanel6").slideToggle("normal");
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
if ($("#flippanel4")[0].style.display != "none") {
$("#flippanel4").slideToggle();
}
if ($("#flippanel5")[0].style.display != "none") {
$("#flippanel5").slideToggle();
}
if ($("#flippanel7")[0].style.display != "none") {
$("#flippanel7").slideToggle();
}
if ($("#flippanel8")[0].style.display != "none") {
$("#flippanel8").slideToggle();
}
if ($("#flippanel9")[0].style.display != "none") {
$("#flippanel9").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy7").click(function() {
$("#flippanel7").slideToggle("normal");
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
if ($("#flippanel4")[0].style.display != "none") {
$("#flippanel4").slideToggle();
}
if ($("#flippanel5")[0].style.display != "none") {
$("#flippanel5").slideToggle();
}
if ($("#flippanel6")[0].style.display != "none") {
$("#flippanel6").slideToggle();
}
if ($("#flippanel8")[0].style.display != "none") {
$("#flippanel8").slideToggle();
}
if ($("#flippanel9")[0].style.display != "none") {
$("#flippanel9").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy8").click(function() {
$("#flippanel8").slideToggle("normal");
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
if ($("#flippanel4")[0].style.display != "none") {
$("#flippanel4").slideToggle();
}
if ($("#flippanel5")[0].style.display != "none") {
$("#flippanel5").slideToggle();
}
if ($("#flippanel6")[0].style.display != "none") {
$("#flippanel6").slideToggle();
}
if ($("#flippanel7")[0].style.display != "none") {
$("#flippanel7").slideToggle();
}
if ($("#flippanel9")[0].style.display != "none") {
$("#flippanel9").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy9").click(function() {
$("#flippanel9").slideToggle("normal");
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
if ($("#flippanel4")[0].style.display != "none") {
$("#flippanel4").slideToggle();
}
if ($("#flippanel5")[0].style.display != "none") {
$("#flippanel5").slideToggle();
}
if ($("#flippanel6")[0].style.display != "none") {
$("#flippanel6").slideToggle();
}
if ($("#flippanel7")[0].style.display != "none") {
$("#flippanel7").slideToggle();
}
if ($("#flippanel8")[0].style.display != "none") {
$("#flippanel8").slideToggle();
}
});
});
</script>

编辑:基于注释的代码的新尝试

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div style="position: relative; left: 20%;" class='div-toggle' id='flippy'>
click me1
</div>
<div style="position: relative; left: 20%;" class='div-toggle' id='flippy2'>
click me2
</div>
<div style="position: relative; left: 20%;" class='div-toggle' id='flippy3'>
click me3
</div>
</div>

<script>
$(document).ready(function() {
let first = localStorage.getItem('open-toggle');
if (first) $(`#${first}`).trigger('click');
$(".div-toggle").click(function() {
$(".div-toggle").not(this).slideToggle("normal");
localStorage.setItem('open-toggle', $(this).attr('id'))
})
})
</script>


<script>
$("#flippanel").hide();
$("#flippanel2").hide();
$("#flippanel3").hide();
$(document).ready(function() {
$("#flippy").click(function() {
$("#flippanel").slideToggle("normal");
if ($("#flippanel2")[0].style.display != "none") {
$("#flippanel2").slideToggle();
}
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy2").click(function() {
$("#flippanel2").slideToggle("normal");
if ($("#flippanel")[0].style.display != "none") {
$("#flippanel").slideToggle();
}
if ($("#flippanel3")[0].style.display != "none") {
$("#flippanel3").slideToggle();
}
});
});
$(document).ready(function() {
$("#flippy3").click(function() {
$("#flippanel3").slideToggle("normal");
if ($("#flippanel")[0].style.display != "none") {
$("#flippanel").slideToggle();
}
if ($("#flippanel2")[0].style.display != "none") {
$("#flippanel2").slideToggle();
}
});
});
</script>

Answer 1

这个片段显示了一些事情:如何根据您的规范正确地打开和关闭开关。它还展示了如何在localStorage中存储打开开关，在页面加载和触发时找到它。这些部分被注释掉了，因为它们在代码片段沙箱中失败了——但是在你的代码中取消注释并进行测试。

$(document).ready(function() {
// let first = localStorage.getItem('open-toggle');
// if (first) $(`#${first}`).trigger('click');
$(".div-toggle").click(function() {
$(".div-toggle").not(this).slideToggle("normal");
// localStorage.setItem('open-toggle', $(this).attr('id'))
})
})

.div-toggle {
padding: 20px;
text-align: center;
background: #333;
color: #fff;
margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='div-toggle' id='flippy1'>
click me
</div>
<div class='div-toggle' id='flippy2'>
click me
</div>
<div class='div-toggle' id='flippy3'>
click me
</div>
</div>