Collapse boostrap 4 событие.
Здравствуйте. Ребят помогите с вопросом, уже несколько дней голову ломаю, честно сдался и решил обратится к вам. Есть несколько Collapse, от 3 до бесконечности скажем так, в зависимости на какой странице. Вот структура:
<div class="block_search_ajax">
<div class="float_field mt-2 pt-2 pb-2 pl-3 pr-3 border rounded">
<a href="#bs_568" class="lable_field collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="bs_568">Название</a>
<div class="multi-collapse collapse" id="bs_568" style="">
содержимое
</div>
<div class="float_field mt-2 pt-2 pb-2 pl-3 pr-3 border rounded">
<a class="lable_field collapsed" data-toggle="collapse" href="#bs_check" role="button" aria-expanded="false" aria-controls="bs_check">Название</a>
<div class="multi-collapse collapse" id="bs_check" style="">
содержимое
</div>
<div class="float_field mt-2 pt-2 pb-2 pl-3 pr-3 border rounded">
<a class="lable_field" data-toggle="collapse" href="#bs_add_rc" role="button" aria-expanded="false" aria-controls="bs_add_rc">Название</a>
<div class="collapse multi-collapse" id="bs_add_rc">
содержимое
</div>
</div>
нужно сделать чтоб после закрытия или открытие сохранялось его текущее состояние при перезагрузке странице. |
Spasatel801,
при клике по ссылке в block_search_ajax сохранять в обьект aria-controls этой ссылки, при повторном клике удалять это id, сам обьект хранить в localStorage при загрузке страницы кликать по ключам этого обьекта. |
Цитата:
|
Рони, спасай. Ничего у меня не получается :cray:
|
Spasatel801,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>
<script>
jQuery(window).on("load", function() {
var obj = JSON.parse(localStorage.getItem("collapse") || "{}");
Object.keys(obj).forEach(function(id) {
var selector = "[aria-controls='"+id+"']";
//jQuery(selector).click();//эту строку открыть, ниже строки
jQuery(selector).attr("aria-expanded", "true").addClass("collapsed");// убрать
selector = "#" + id; // если нужна
jQuery(selector).addClass("show");// анимация
});
jQuery(".block_search_ajax").on("click", "[aria-controls]", function() {
var id = this.getAttribute("aria-controls");
id in obj ? delete obj[id] : (obj[id] = true);
localStorage.setItem("collapse", JSON.stringify(obj));
})
});
</script>
</head>
<body>
<div class="block_search_ajax">
<div class="float_field mt-2 pt-2 pb-2 pl-3 pr-3 border rounded">
<a href="#bs_568" class="lable_field collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="bs_568">Название</a>
<div class="multi-collapse collapse" id="bs_568" style="">
содержимое
</div>
</div>
<div class="float_field mt-2 pt-2 pb-2 pl-3 pr-3 border rounded">
<a class="lable_field collapsed" data-toggle="collapse" href="#bs_check" role="button" aria-expanded="false" aria-controls="bs_check">Название</a>
<div class="multi-collapse collapse" id="bs_check" style="">
содержимое
</div>
</div>
<div class="float_field mt-2 pt-2 pb-2 pl-3 pr-3 border rounded">
<a class="lable_field" data-toggle="collapse" href="#bs_add_rc" role="button" aria-expanded="false" aria-controls="bs_add_rc">Название</a>
<div class="collapse multi-collapse" id="bs_add_rc">
содержимое
</div>
</div>
</div>
</body>
</html>
|
Спасибо, Рони! Выручаешь как всегда ))
|
| Часовой пояс GMT +3, время: 08:34. |