记得背页上的手风琴状态

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

以一种全新的方式得到了

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();
        }
    });
});

Answer 2

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()
  })

运行它，并告诉我是否有任何问题。