[英]I'm trying to get the user's browser to “remember” which portion of a collapisble menu was open when they last visited a page and then reopen it
我使用materializecss框架制作了前端(HTML)。 我正在使用单击时展开的可折叠元素。
其中一些元素是 forms,在提交后会触发 web 页面的刷新。 页面重新加载后,可折叠元素全部折叠。 此外,当用户离开页面然后返回时,所有元素都会折叠。
我试图找到一种方法来“记住”哪个元素是打开的。 我在想最好将当前打开的元素存储在本地 memory 中,然后在重新加载时使用访问权限,然后使用 their.open() 方法....但我不知道如何在本地存储上执行此操作.
编辑:
添加我当前使用本地存储的尝试
html
<ul class="collapsible">
<li>
<div class="collapsible-header">first tab header</div>
<div class="collapsible-body"><span>first tab body</span></div>
</li>
<li>
<div class="collapsible-header">second tab header</div>
<div class="collapsible-body"><span>second tab body</span></div>
</li>
</ul>
javascript
<script>
function activate(n){
//open collapsible element, the tab # being the variable passed in
$(".collapsible").open(n)
}
function storeElem(n){
window.localStorage.setItem('openElem', n)
}
$(document).ready(function(){
var instance = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: storeElem(n)
});
var previousElem = window.localStorage.getItem('openElem')
if (previousElem) {
activate(previousElem)
}
})
</script>
onOpenStart
的参数必须是 function 才能调用。 否则,您将在初始化手风琴时调用它,而不是在事件发生时调用它。 此外,您在调用中使用了未定义的变量n
。
使用.index()
获取正在打开的元素的 position。
$(document).ready(function(){
var instance = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(li) {
storeElem($(li).index());
}
});
var previousElem = window.localStorage.getItem('openElem')
if (previousElem) {
activate(previousElem)
}
})
尝试将数据写入本地存储,然后在加载页面时读取它。
Static数据
const LOCALSTORAGE = {
COLLAPSED_INDEX: 'project-name-is-collapsed-state',
};
主要逻辑
class Collapsible {
_instance = null;
// ---> Getters
_getLocalIndex() {
const collapsedIndex = localStorage.getItem(LOCALSTORAGE.COLLAPSED_INDEX);
return collapsedIndex;
}
// ---> Setters
_setLocalIndexByElement(element) {
const index = $(element).index();
this._setLocalIndex(index);
}
_setLocalIndex(index) {
localStorage.setItem(LOCALSTORAGE.COLLAPSED_INDEX, index);
}
// ---> Events
_onOpenStart(element) {
this._setLocalIndexByElement(element);
}
// ---> Actions
init() {
this._setupInstance();
this._setupActiveTab();
}
_setupInstance() {
this._instance = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: this._onOpenStart,
});
}
_setupActiveTab() {
const index = this._getLocalIndex();
if (index === undefined) {
return;
}
this._openByIndex(index);
}
_openByIndex(index) {
if (this._instance === null) {
return;
}
this._instance.open(index);
}
}
初始化
function onDocReady() {
const collapsible = new Collapsible();
collapsible.init();
}
$(document).ready(onDocReady);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.