Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   jquery.cookie.js (https://javascript.ru/forum/dom-window/61369-jquery-cookie-js.html)

s24344 15.02.2016 13:57
jquery.cookie.js
 
Ребята, подскажите, пожалуйста, почему при обновлении страницы не запоминается активный блок.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>accordion</title>
	<link rel="stylesheet" href="css/normalize.css">
	<style>
		.accordion {
			width: 600px;
			margin: 20px auto;
		}
		.accordion__question {
			background: #F6F6F6 url("../images/plus.png") no-repeat 8px center;
			padding: 10px 10px 10px 40px;
			margin: 0 0 1px 0;
			color: #000;
			font-size: 20px;
			border-radius: 5px;
			cursor: pointer;
		}
		.accordion__question:hover {
			background-color: #DFE4E8;
		}
		.accordion__question_open {
			background-image: url("../images/minus.png");
		}

		.accordion__answer {
			padding: 0 8px;
		}
	</style>
</head>
<body>
	<div class="accordion">
		<h2 class="accordion__question" data-id="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
		<div class="accordion__answer">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
		</div>

		<h2 class="accordion__question" data-id="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
		<div class="accordion__answer">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
		</div>

		<h2 class="accordion__question" data-id="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
		<div class="accordion__answer">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
		</div>
	</div>

<script src="js/jquery-1.12.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/main.js"></script>
</body>
</html>



$(function() {
	
	$(".accordion__answer").css("display", "none");

	if ($.cookie("openItem")) {
		var openItem = parseInt($.cookie("openItem"));

		// alert(typeof(openItem) + ' - ' + openItem); // должно быть числовое значение
	}

	$(".accordion__question").on("click", function() {
		$(".accordion__question").not($(this)).removeClass("faq__question_open");
		$(".accordion__answer").not($(this).next(".faq__answer")).slideUp(500);
		$(this).next(".accordion__answer").slideToggle(500);
		$(this).toggleClass("accordion__question_open");

		$(this).addClass("active").siblings().removeClass('active');

		// уставнавливаем cookie
		// первый параметр - имя, создаваемой cookie
		// второй параметр - значение данной cookie
		$.cookie("openItem", $(this).data('id'));

		console.log($(this).data('id'));
	});
});

рони 15.02.2016 14:35
s24344,
может потому что ваш любимый браузер Google Chrome и вы тестируите локально.

рони 15.02.2016 14:40
Открывашка 253 с запоминаем открытой вкладки
 
s24344,
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>accordion</title>
	<link rel="stylesheet" href="css/normalize.css">
	<style>
		.accordion {
			width: 600px;
			margin: 20px auto;
		}
		.accordion__question {
			background: #F6F6F6 url("../images/plus.png") no-repeat 8px center;
			padding: 10px 10px 10px 40px;
			margin: 0 0 1px 0;
			color: #000;
			font-size: 20px;
			border-radius: 5px;
			cursor: pointer;
		}
		.accordion__question:hover {
			background-color: #DFE4E8;
		}
		.accordion__question_open {
			background-image: url("../images/minus.png");
		}

		.accordion__answer {
			padding: 0 8px;
            display: none;
		}
        .active{
          border: 2px solid #000000
        }

	</style>
</head>
<body>
	<div class="accordion">
		<h2 class="accordion__question" data-id="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
		<div class="accordion__answer">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
		</div>

		<h2 class="accordion__question" data-id="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
		<div class="accordion__answer">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
		</div>

		<h2 class="accordion__question" data-id="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
		<div class="accordion__answer">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
		</div>
	</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  <script>
   $(function() {
    var $answer = $(".accordion__answer"), $question = $(".accordion__question");
    $question.on("click", function(event, spide) {
        spide = spide || 500;
		$question.not($(this).toggleClass("faq__question_open active")).removeClass("faq__question_open active");
		$answer.not($(this).next().slideToggle(spide)).slideUp(spide);
		$.cookie("openItem", $(this).data('id'));
	});
	if ($.cookie("openItem")) {
		var openItem = parseInt($.cookie("openItem"));
        $question.eq(--openItem).trigger("click",["fast"])

	}
});

  </script>
</body>
</html>

s24344 15.02.2016 17:42
Спасибо

DDim1000 21.10.2016 12:36
Скажите пожалуйста, откуда можно скачать jquery.cookie.js ?

Dilettante_Pro 21.10.2016 14:03
DDim1000,
http://plugins.jquery.com/cookie/

DDim1000 21.10.2016 15:28
Dilettante_Pro, Спасибо большое.

DDim1000 21.10.2016 15:57
У меня тоже не запоминается последний открытый блок div.., после обновления страницы, последний открытый div принимает display: none.

<head>
...
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.1.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script>  
<script type="text/javascript" src="js/shop-script.js"></script>
<title>...</title>
</head>

shop-script.js:
$(document).ready(function(){
...
      $('#block-category > ul > li > a').click(function(){
	 
	 if ($(this).attr('class') != 'active' )
	      {
		   $('#block-category > ul > li > ul').slideUp(400);
		   $(this).next().slideToggle(400);
		           $('#block-category > ul > li > a').removeClass('active');
				   $(this).addClass('active');
				   $.cookie('select_cat', $(this).attr('id'));				   				   	
		  }
	else
	      {
			       $('#block-category > ul > li > a').removeClass('active'); 
				   $('#block-category > ul > li > ul').slideUp(400);
				   $.cookie('select_cat', '');
		  };
	
	});


	if ($.cookie('select_cat') = '')
	     {
		 $('#block-category > ul > li > #'+$.cookie('select_cat')).addClass('active').next().show();	 
		 }
...


Часовой пояс GMT +3, время: 18:41.