Форум

Spasatel801 · #1 (**permalink**) 04.10.2019, 06:36

Здравствуйте. Ребят помогите с вопросом, уже несколько дней голову ломаю, честно сдался и решил обратится к вам. Есть несколько 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>

нужно сделать чтоб после закрытия или открытие сохранялось его текущее состояние при перезагрузке странице.

рони · #2 (**permalink**) 04.10.2019, 07:38

Spasatel801,
при клике по ссылке в block_search_ajax сохранять в обьект aria-controls этой ссылки, при повторном клике удалять это id, сам обьект хранить в localStorage при загрузке страницы кликать по ключам этого обьекта.

ksa · #3 (**permalink**) 04.10.2019, 07:39

Сообщение от Spasatel801

Есть несколько Collapse

Ты про значения class или data-toggle?

Spasatel801 · #4 (**permalink**) 04.10.2019, 20:54

Рони, спасай. Ничего у меня не получается

рони · #5 (**permalink**) 04.10.2019, 21:08

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>

Spasatel801 · #6 (**permalink**) 05.10.2019, 08:36

Спасибо, Рони! Выручаешь как всегда ))

Форум

Справочник

Discord чат

Курсы javascript