Question

这是我的HTML

<!-- this is my link -->
<a href='javascript:void(0);' class='show_hide'>Show Hide</a>
<!-- This is my show hide content -->
<div class='slidingDiv'> ..................Here my content...............</div>

我是Jquery初学者。我只是尝试建立一个滑动条。我在parent().next()函数中使用了slideToggle()。因为我需要为每个DIV显示/隐藏。所以我写了这段代码......

$(".show_hide").show();
$(".slidingDiv").hide();
$('.show_hide').click(function () {
   $(this).parent().next().slideToggle();
});

此代码运行良好。但现在我的问题是刷新后需要cookie才能休息。我写这段代码

var cook= $.cookie('showdiv');
if(cook=='true')
    $(".slidingDiv").show();
else
    $(".slidingDiv").hide();

    $('.show_hide').on('click', function()
    {
            $(this).parent().next().slideToggle('normal', function(){
                $.cookie('showdiv', $(this).is(':visible'));
            });
    });

但是cookie并不起作用。请注意，我确信我已成功安装jquery cookie插件。

Answer 1

不幸的是，通过在cookie中存储布尔值来检查是否为true，您必须将其作为字符串进行比较。

您是否已使用console.log进行检查或提醒您返回Cookie？

console.log($.cookie('showdiv'));

我测试并比较，因为字符串没有问题。

请参阅fiddle

Answer 2

如果发布的是您的HTML标记，则选择器必须为$(this).next(".slidingDiv")而不包含父级。

代码：

var cook = $.cookie('showdiv');
console.log(cook)
if (cook == 'true') $(".slidingDiv").show();
else $(".slidingDiv").hide();

$('.show_hide').on('click', function () {
    $(this).next(".slidingDiv").slideToggle('normal', function () {
        $.cookie('showdiv', $(this).is(':visible'));
    });
});

演示：http://jsfiddle.net/IrvinDominin/PRDU7/

发布jquery show，hide，slidetoggle with cookie

2 个答案: