Запомнить состояние аккордеона на странице возврата

У меня есть несколько аккордеонов на странице архива со свернутым состоянием по умолчанию. У каждого аккордеона есть ссылки, и когда я нажимаю на одну из них, я попадаю на их собственную страницу, и, конечно же, когда я возвращаюсь, все аккордеоны сворачиваются. Вместо этого я хочу вернуться на страницу архива и найти открытые аккордеоны.

Это пример аккордеона в 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);
});

Может кто-нибудь мне помочь?

пожалуйста, добавьте два или более аккордеона.

maulik bafalipara 15.12.2020 12:48

Я добавил еще несколько аккордеонов с классом 'collapse'

pennylane 15.12.2020 14:05
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
476
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

HTML - изменения

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

Я добавил тег привязки при вызове функции onclick.

Изменения Jquery добавьте функцию ниже в тег script.

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

Запустите его и дайте мне знать, если есть какие-либо проблемы.

К сожалению, это не работает. Когда я нажимаю на ссылку, я читаю это внутри консоли «Uncaught ReferenceError: setCookie не определен».

pennylane 16.12.2020 08:07

я думаю, вы забыли добавить неуместные функции javascript getCookie, check_last_accordion и setCookie, добавьте эти функции в тег скрипта внизу вашего HTML.

maulik bafalipara 16.12.2020 08:11

Извините, но даже если теперь консоль понятна, она все равно не работает должным образом.

pennylane 16.12.2020 09:11

$term_subchild = get_term($term_subchild, 'project_category'); $acc_content .= '<div class = "sub-child-wrap p10-10 d-4 t-4 ts-6 m-all">'; $acc_content .= '<a href = "' .get_permalink(get_the_ID()) . '" class = "дочерний блок" onclick = "setCookie(\'acc5fd8b3656f7b01\')">'; $acc_content .= '<h5>' . get_the_title(get_the_ID()) . '</h5>'; $acc_content .= '</a>'; $acc_content .= '</div>';

pennylane 16.12.2020 09:15

<скрипт> 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() { var last_accordion = getCookie('latest_accordion'); if (latest_accordion !== undefined || last_accordion !== '') { $("button.acc-tgg-button[data-target='#" + last_accordion + "']").click() } }

pennylane 16.12.2020 09:15

function setCookie(accordion_id) { document.cookie = "latest_accordion = " + Accordion_id + "; path=/" } </script> $(document).ready(function () { check_last_accordion() })

pennylane 16.12.2020 09:15

без ошибки как угадать ошибку? если вы можете предоставить мне что-нибудь, я могу сделать все возможное, чтобы решить вашу проблему.

maulik bafalipara 16.12.2020 10:16

Единственное предупреждение, которое я вижу, это то, что «latest_accordion» скоро будет отклонен, потому что для атрибута «sameSite» установлено значение «none» или недопустимое значение без атрибута «secure». Чтобы узнать больше об атрибуте «sameSite», прочитайте developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameS‌​ite'

pennylane 16.12.2020 10:33
Ответ принят как подходящий

Получил это новым умопомрачительным способом

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

Другие вопросы по теме