主页 / coding / 问题 / 79350176
Accepted
NiMuSi
Asked: 2025-01-12 23:33:10 +0800 CST

重新加载页面时恢复详细信息状态[重复]

  • 772

我有以下示例代码：

<details><summary>25</summary>
<ul>
<li>100</li>
<li>101</li>    
<details>
<summary>26</summary>
<ul>
    <details>
    <summary>72</summary>
    <ul>
        <li>73</li>
    </ul>
</ul>
<li>27</li>
</ul>
</details>

当我离开该页面并稍后返回时，详细信息会折叠显示。如何恢复（或保留）详细信息项的状态？

html

1 个回答

  1. Best Answer

    根据您的描述，我认为这里提到的解决方案就是您正在寻找的。鉴于该解决方案基于 jQuery 和同级<details>结构（与您自己的嵌套结构相反），我已经转换了代码以（希望）满足您的目的：

    // Loop over all available <details> elements in the page:
document.querySelectorAll("details").forEach((details, index)=>{

  // Create a unique ID based on the loop index:      
  const itemId = `details-${index}`;
  // Create a helper function to dynamically grab the open/closed state from localStorage
  const detailsState = ()=> localStorage.getItem(itemId);

  // Open elements that were found in localStorage as open:
  if ( detailsState() === "open" ){
    details.setAttribute("open", "true");
  } 

  // Add click handlers to update the open/close state in localStorage:
  details.querySelector("summary").addEventListener("click", e =>{

    e.preventDefault();

    if ( detailsState() === "open" ){
      localStorage.setItem(itemId, "closed");
      details.removeAttribute("open");
    } else {
      localStorage.setItem(itemId, "open");
      details.setAttribute("open", "true");
    }

  })

});
    <details id="parent">
  <summary>25</summary>
  <ul>
      <li>100</li>
      <li>101</li>    
      <details>
      <summary>26</summary>
      <ul>
          <details>
          <summary>72</summary>
          <ul>
              <li>73</li>
          </ul>
      </ul>
      <li>27</li>
  </ul>
</details>

    当然，您需要在真实的开发环境中运行此代码来测试它。请确保Application在 DevTools 中打开面板来调试状态，如屏幕截图所示。

    在此处输入图片描述

    • 0

相关问题