Question

我想制作许多没有标识符的盒子，onClick关闭它们，如：

<div class="box">
    <header>I'm the box header<ins></ins></header>
    <h1>Title here</h1>
    <p>I'm a paragraph.</p>
</div>

使用此脚本

$(".box header").click(function(){
    $(this).nextAll().slideToggle();
});

在任务视图中，隐藏方法并不那么重要。 <box><header></header><content>text</content></box>和$this.next().slideToggle()一样对我也有好处。

问题是，如何为切换元素添加cookie，以便在页面刷新时保持关闭。
与$(".tabs:not(.forget)").tabs({cookie: {expires: 1}, collapsible: true});一样。

是否可以不使用ID，并检查cookie中的所有ID？我正在寻找一个更好的解决方案。谢谢你的帮助。

Answer 1

$(".box header").click(function(){
    $(.box).slideToggle();
    // Set the cookie here
    var boxState = ($(.box).css('display')=='block')? 1: 0;
    $.cookie("boxState", state);
});

您可以使用jQuery Cookie设置Cookie。

Answer 2

新答案：

如果不为每个盒子分配唯一的ID，我真的不认为你可以解决这个挑战。从理论的角度来看（我会说出一个实际的观点），你想要完成的事情完全符合分配唯一ID的概念。您希望对各个独特的元素采取独特的独特行动。试图在没有个人唯一身份证的情况下实现这一目标正在与基础理论本身作斗争。

那就是说，我很欣赏在服务器端生成唯一ID可能是你不想做的麻烦。但我认为你问题的最佳答案是完全按照你所希望的那样去做......： - ）

旧答案：

如果框中的框始终具有相同的顺序，则可以将框的索引编号附加到字符串，然后将其存储在cookie中。就像“2,3,10,13”然后在页面加载时，你读取cookie，cookieVal.split（“，”）然后循环遍历值并使用jQuery：eq（）选择器（http：// api。 jquery.com/eq-selector/）做类似

的事情

$(".box:eq(" + i + ")").hide();

Answer 3

您需要某种方式来引用Cookie中的框。它可以是ID，类，或者如果框的数量是固定的，并且顺序不变，它可以是数字。我会使用一个ID（或其他一些独特的属性）来保证安全，因为无论出于何种原因，盒子的顺序会发生变化，那么cookie中的数字顺序就不会匹配。

var closedBoxesCookie=document.cookie;
$(document).ready(function() { 
    $(closedBoxesCookie.split(',')).each(function() {
        $('#' + this).hide();
    });
});

Answer 4

好吧，我想我做到了 - .-

在

的情况下

<div class="box">
    <header>Box Header <ins></ins></header>
    <figure>
        <h1>Header 1</h1>
        <h2>Header 2</h2>
        <p>Paragraph.</p>
    </figure>
</div>

使用JS：

$("body .box figure").each(function(i){
    var o = $.cookie('boxopened'+i);
    if (!o) 
    {
        $(this).show();
    }
    else 
    {
        $(this).hide();
    }
});
$("body .box header").click(function(){
    var i = $(this).next().index("body .box figure");
    var o = $.cookie('boxopened'+i);
    if (!o)
    {
        $.cookie('boxopened'+i, 'true'); 
    }
    else 
    { 
        $.cookie('boxopened'+i, ''); 
    }
    $(this).next().slideToggle();
});

作品。有什么建议吗？我怎样才能做得更好？

jQuery slideToggle和带有许多框的cookie

4 个答案: