Вопрос по скрипту спойлера на jQuery

350

04 июля 2017, 22:38

Добрый день! Есть спойлер на jQuery. Работает корректно, но, фишка в том, что при открытии спойлера срабатывает ссылка загрузки страницы (это необходимо, т.к. на спойлерах построено боковое меню сайта), а после перезагрузки страницы спойлер возвращается в значение по-умолчанию (закрыт). Как сделать, чтобы после перехода на другую страницу (перезагрузки) спойлер, на котором нажимаем, оставался активным (открытым). Ниже код спойлера:

jQuery('.spoiler-body15').hide(); 
jQuery('.spoiler-title15').click(function() { 
  jQuery(this).toggleClass('opened').toggleClass('closed').next().slideToggle(); 
  if (jQuery(this).hasClass('opened')) { 
    jQuery(this).html('<img src="/wp-content/uploads/2017/06/but_red_raz1.png" />'); 
  } else { 
    jQuery(this).html('<img src="/wp-content/uploads/2017/06/but_white_raz1.png" />'); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="spoiler-title15 closed"><img src="/wp-content/uploads/2017/06/but_white_raz15.png" /></div> 
<div class="spoiler-body15" style="cursor: pointer;"><a class="list" style="color: #808080; text-decoration: none; font-weight: bold; cursor: pointer;" href="#">Вывески</a> 
  <a class="list" style="color: #808080; text-decoration: none; font-weight: bold;" href="#">Объемные буквы</a> 
  <a class="list" style="color: #808080; text-decoration: none; font-weight: bold;" href="#">Лайт-боксы</a></div>

Answer 1

Сваял такой код, но при обновлении страницы все равно картинка сбрасывается...подскажите плиз, что не так:

<div id="menu-toggle"><a href="#"><img src="but_white_raz1.png"        id="myimg"></a></div>
<div id="wrapper">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>
<script type="text/javascript">
 var toggled = localStorage['toggled'] == 'true';
$("#wrapper").toggleClass("toggled", toggled);
  $("img").bind("click", function() {
    var src = ($(this).attr("src") === "but_white_raz1.png")
        ? "but_red_raz1.png" 
        : "but_white_raz1.png";
    toggled = !toggled;
  localStorage['toggled'] = toggled;
  $("#wrapper").toggleClass("toggled");
$(this).attr("src", src);
});