我有一个jsp页面，其中我有一个带可折叠列表的面板组，当我调用servlet函数时，它将渲染到同一页面的数据。当我调用servlet函数时，它将渲染到同一页面的数据。但是可折叠的菜单被刷新了。如何保持以前的状态？
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" href="#collapse2"><li class="list-group-item" style="background-color: #394263;color: white">A</li></a>
</h5>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<a href="Servlet?environment=<%=env%>&date=<%=date%>&test=AB" id = "A" ><li class="list-group-item" style="background-color: #394263;color: white">B</li></a>
<a href="Servlet?environment=<%=env%>&date=<%=date%>&test=AB" id = "B"><li class="list-group-item" style="background-color: #394263;color: white">C</li></a>
<a href="TestServlet?environment=<%=env%>&date=<%=date%>&test=AB" id="security"><li class="list-group-item" style="background-color: #394263;color: white">D</li></a>
</ul>
</div>
</div>
</div>
你可以在本地存储中设置值，每当你点击任何一个 <a> 的值，然后存储 href 在 localStorage 然后总是调用函数 onload 的页面，只打开那些被用户点击的面板。
所以，这里是javascript代码。
//onload of your page this will get called
function check_storage() {
//check if there is any value in localStorage
if (localStorage.getItem("save") != null) {
//get that value
var value= localStorage.getItem("save");
console.log(value);
show(value); //call function
}
}
//onclick of <a> this will get called
function save(el) {
//store the href to some variable
var save = el.getAttribute("href");
console.log(save);
localStorage.clear();//clear previous data
localStorage.setItem("save", save);//add data to storage
}
function show(date_value) {
console.log("in")
$(date_value).toggle();//to show panel
}
你的html将看起来像下面。
//add onload event
<body onload="check_storage()">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"> //add onclick
<a data-toggle="collapse" onclick="save(this)" href="#collapse2">
<li class="list-group-item" style="background-color: #394263;color: white">A</li>
</a>
</h5>
</div>
...
</div>
</body>