在返回页面上记住手风琴状态

Question

我在存档页面上有多个手风琴，默认状态为折叠。每个手风琴都有链接，当我点击其中一个时，我会进入他们自己的页面，当然，当我返回时，手风琴都折叠起来了。相反，我想做的是返回存档页面并找到打开时单击的手风琴。

这是 HTML 中的手风琴示例：

<div class="zn_accordion--shortcode acc--style2 panel-group ">
 <div class="acc-group ">
 <button data-toggle="collapse" data-target="#acc5fd8b3656f7b0" class="acc-tgg-button text-custom collapsed btn-link">Title
 </button>
  <div id="acc5fd8b3656f7b0" class="acc-panel-collapse collapse ">
   <div class="acc-content">
    <div class="sub-child-wrap p10-10 d-4 t-4 ts-6 m-all">
     <a href=“link” class="sub-child block"<h5>Title</h5></a>
    </div>
   <div class="clear"></div>
   </div><!-- /.acc-content -->
  </div>
 </div><!-- end /.acc-group -->
</div>
<div class="zn_accordion--shortcode acc--style2 panel-group ">
 <div class="acc-group ">
 <button data-toggle="collapse" data-target="#acc5fd8b3656f7b0" class="acc-tgg-button text-custom collapsed btn-link">Title
 </button>
  <div id="acc5fd8b3656f7b0" class="acc-panel-collapse collapse ">
   <div class="acc-content">
    <div class="sub-child-wrap p10-10 d-4 t-4 ts-6 m-all">
     <a href=“link” class="sub-child block"<h5>Title</h5></a>
    </div>
   <div class="clear"></div>
   </div><!-- /.acc-content -->
  </div>
 </div><!-- end /.acc-group -->
</div>
<div class="zn_accordion--shortcode acc--style2 panel-group ">
 <div class="acc-group ">
 <button data-toggle="collapse" data-target="#acc5fd8b3656f7b0" class="acc-tgg-button text-custom collapsed btn-link">Title
 </button>
  <div id="acc5fd8b3656f7b0" class="acc-panel-collapse collapse ">
   <div class="acc-content">
    <div class="sub-child-wrap p10-10 d-4 t-4 ts-6 m-all">
     <a href=“link” class="sub-child block"<h5>Title</h5></a>
    </div>
   <div class="clear"></div>
   </div><!-- /.acc-content -->
  </div>
 </div><!-- end /.acc-group -->
</div>
<div class="zn_accordion--shortcode acc--style2 panel-group ">
<div class="acc-group ">
<button data-toggle="collapse" data-target="#acc5fd8b3656f7b0" class="acc-tgg-button text-custom collapsed btn-link">Title
</button>
<div id="acc5fd8b3656f7b0" class="acc-panel-collapse collapse ">
<div class="acc-content">
<div class="sub-child-wrap p10-10 d-4 t-4 ts-6 m-all">
<a href=“link” class="sub-child block"<h5>Title</h5></a></div><div class="clear"></div></div><!-- /.acc-content --></div> </div><!-- end /.acc-group --> </div>
<div class="zn_accordion--shortcode acc--style2 panel-group ">
 <div class="acc-group ">
  <button data-toggle="collapse" data-target="#acc5fd8882426e1e"
  class="acc-tgg-button text-custom btn-link" aria-expanded="true">Title
  </button>
  <div id="acc5fd8882426e1e" class="acc-panel-collapse collapse in" aria-expanded="true">
   <div class="acc-content">
     <div class="sub-child-wrap p10-10 d-4 t-4 ts-6 m-all">
      <a href="link" class="sub-child block"">
       <h5>Title</h5>
      </a>
     </div>
     <div class="clear"></div>
   </div><!-- /.acc-content -->
  </div>
 </div><!-- end /.acc-group -->
</div>

还有我的 Jquery 代码：

 $(".acc-tgg-button").click(function () {

 $(".acc-tgg-button[aria-expanded='true']").not(this).click();

我尝试使用 docCookies.js 但我不知道如何使用它来让它像这样记住手风琴的最后状态。我试过这段代码，但我真的被困在这里：

$(".acc-tgg-button").click(function () {
  $(".acc-tgg-button[aria-expanded='true']").not(this).click();
  docCookies.setItem('acc-tgg-button', 'true', '', '','', true);
});

谁能帮帮我？

Answer 1

HTML - 变化

<a href="link" class="sub-child block" onclick="setCookie('acc5fd8b3656f7b01')">
  <h5>Title</h5>
</a>

我在 onclick 函数调用上添加了锚标记。

Jquery 变化将以下功能添加到您的脚本标签中。

  function getCookie(name) {
    var value = "; " + document.cookie;
    var parts = value.split("; " + name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
  }

  function check_last_accordion() {
    latest_accordion = getCookie('latest_accordion')
    if (latest_accordion != undefined || latest_accordion != '') {
      $("button.acc-tgg-button[data-target='#" + latest_accordion + "']").click()
    }
  }

  function setCookie(accordion_id) {
    document.cookie = "latest_accordion=" + accordion_id + "; path=/"
  }

  $(document).ready(function() {
    check_last_accordion()
  })

运行它，让我知道是否有任何问题。

Answer 2

以一种令人兴奋的新方式获得它

jQuery(document).ready(function ($) {
    $(window).unload(function() {
        var accTggButtons = document.querySelectorAll(".acc-tgg-button"); 
            accTggButtons.forEach((element, i) => {  
                if (element.getAttribute('aria-expanded') === "true") {
                    window.sessionStorage.setItem(window.location.pathname, i); 
                }
            });
    });
    $(window).on('load', function (event) { 
        var id = JSON.parse(window.sessionStorage.getItem(window.location.pathname));
        if(id){
            $('.acc-tgg-button').eq(id).click();
        }
    });
});

在返回页面上记住手风琴状态

Remember accordion state on go back page

html

jquery

accordion