15.02.2016, 13:57
|
|
Профессор
|
|
Регистрация: 12.08.2015
Сообщений: 206
|
|
|
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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
s24344,
может потому что ваш любимый браузер Google Chrome и вы тестируите локально.
|
|
15.02.2016, 14:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Открывашка 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>
|
|
15.02.2016, 17:42
|
|
Профессор
|
|
Регистрация: 12.08.2015
Сообщений: 206
|
|
|
Спасибо
|
|
21.10.2016, 12:36
|
|
Профессор
|
|
Регистрация: 20.10.2016
Сообщений: 223
|
|
|
Скажите пожалуйста, откуда можно скачать jquery.cookie.js ?
|
|
21.10.2016, 14:03
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
|
|
21.10.2016, 15:28
|
|
Профессор
|
|
Регистрация: 20.10.2016
Сообщений: 223
|
|
|
Dilettante_Pro, Спасибо большое.
|
|
21.10.2016, 15:57
|
|
Профессор
|
|
Регистрация: 20.10.2016
Сообщений: 223
|
|
У меня тоже не запоминается последний открытый блок 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();
}
...
|
|
|
|
