实现这个功能的关键是使用 JavaScript 将搜索状态存储在用户会话中，以便在搜索刷新后恢复状态。你可以通过以下步骤来实现：
-
使用 JavaScript 监听折叠搜索的展开和收起事件，并在用户进行操作时，将当前状态保存到用户会话中（可以使用 sessionStorage 或 localStorage）。
-
在页面加载时，检查用户会话中是否保存了搜索状态，并据此设置搜索的展开或折叠状态。
下面是一个简单的示例代码，演示了如何使用 localStorage 来实现这个功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折叠搜索</title>
<style>
/* 样式省略，包括折叠搜索的样式 */
</style>
</head>
<body>
<div class="search-container">
<button id="toggleButton">展开/折叠搜索</button>
<div id="searchForm" style="display: none;">
<!-- 搜索表单内容 -->
</div>
</div>
<script>
// 检查并设置搜索状态
window.onload = function() {
var searchForm = document.getElementById('searchForm');
var isSearchExpanded = localStorage.getItem('isSearchExpanded') === 'true';
if (isSearchExpanded) {
searchForm.style.display = 'block';
}
};
// 监听展开/折叠按钮点击事件
document.getElementById('toggleButton').addEventListener('click', function() {
var searchForm = document.getElementById('searchForm');
if (searchForm.style.display === 'none') {
searchForm.style.display = 'block';
localStorage.setItem('isSearchExpanded', 'true');
} else {
searchForm.style.display = 'none';
localStorage.setItem('isSearchExpanded', 'false');
}
});
</script>
</body>
</html>
在这个示例中，当用户点击 "展开/折叠搜索" 按钮时，搜索状态会被保存到 localStorage 中，页面加载时会根据保存的状态来设置搜索的显示与隐藏。你可以根据实际情况对代码进行修改和扩展。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
