У меня есть несколько аккордеонов на странице архива со свернутым состоянием по умолчанию. У каждого аккордеона есть ссылки, и когда я нажимаю на одну из них, я попадаю на их собственную страницу, и, конечно же, когда я возвращаюсь, все аккордеоны сворачиваются. Вместо этого я хочу вернуться на страницу архива и найти открытые аккордеоны.
Это пример аккордеона в 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);
});
Может кто-нибудь мне помочь?
Я добавил еще несколько аккордеонов с классом 'collapse'
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 не определен».
я думаю, вы забыли добавить неуместные функции javascript getCookie, check_last_accordion и setCookie, добавьте эти функции в тег скрипта внизу вашего HTML.
Извините, но даже если теперь консоль понятна, она все равно не работает должным образом.
$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>';
<скрипт> 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() } }
function setCookie(accordion_id) { document.cookie = "latest_accordion = " + Accordion_id + "; path=/" } </script> $(document).ready(function () { check_last_accordion() })
без ошибки как угадать ошибку? если вы можете предоставить мне что-нибудь, я могу сделать все возможное, чтобы решить вашу проблему.
Единственное предупреждение, которое я вижу, это то, что «latest_accordion» скоро будет отклонен, потому что для атрибута «sameSite» установлено значение «none» или недопустимое значение без атрибута «secure». Чтобы узнать больше об атрибуте «sameSite», прочитайте developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite'
Получил это новым умопомрачительным способом
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();
}
});
});
пожалуйста, добавьте два или более аккордеона.