如何在折叠面板中使用js.cookie与jQuery清除Cookie？

首先得确保你的页面已经引入了jQuery和js.cookie这两个库，这是实现功能的基础。接下来结合你提供的HTML结构，我给你整理两种常见的清除Cookie场景，你可以根据需求适配：

1. 基础折叠交互 + 切换时清除对应Cookie #

我们先实现折叠面板的基本切换逻辑，同时在点击折叠头的时候清除当前面板的状态Cookie（假设你之前用Cookie记录了面板的展开/收起状态）：

$(document).ready(function() {
    // 初始化面板状态（如果有Cookie记录的话）
    $('.accordion_head').each(function() {
        const nodeTag = $(this).attr('node-tag');
        const isExpanded = Cookies.get(`accordion_state_${nodeTag}`);
        if (isExpanded === 'true') {
            $(this).next('.accordion_body').show();
            $(this).find('.plusminus').text('-');
        } else {
            $(this).next('.accordion_body').hide();
            $(this).find('.plusminus').text('+');
        }
    });

    // 折叠面板点击事件
    $('.accordion_head').click(function() {
        const $this = $(this);
        const nodeTag = $this.attr('node-tag');
        const $body = $this.next('.accordion_body');
        
        // 切换折叠状态
        $body.slideToggle();
        $this.find('.plusminus').text($body.is(':visible') ? '-' : '+');

        // 清除当前面板对应的状态Cookie
        // 注意：path要和你设置Cookie时的路径一致，这里用根路径确保覆盖
        Cookies.remove(`accordion_state_${nodeTag}`, { path: '/' });
    });
});

2. 添加专门按钮清除所有折叠相关Cookie #

如果你需要一键清除所有折叠面板的状态Cookie，还可以加个按钮来实现：

首先在你的HTML里添加这个按钮（放在accordion_container外面或者里面都行）：

<button id="clear-accordion-cookies">重置所有折叠状态并清除Cookie</button>

然后在JS里添加按钮的点击事件：

// 一键清除所有折叠Cookie并重置状态
$('#clear-accordion-cookies').click(function() {
    $('.accordion_head').each(function() {
        const tag = $(this).attr('node-tag');
        Cookies.remove(`accordion_state_${tag}`, { path: '/' });
    });
    // 同步重置所有面板为收起状态
    $('.accordion_body').slideUp();
    $('.plusminus').text('+');
    alert('所有折叠状态Cookie已清除，面板已重置！');
});

几个关键注意点 #

• Cookie路径匹配：清除Cookie时的path参数必须和你设置Cookie时的路径一致，如果之前没指定路径，默认是当前页面路径，建议统一用path: '/'避免遗漏。
• js.cookie版本兼容：如果你用的是v3.x以上的js.cookie，清除Cookie时建议明确指定path；如果是旧版本（v2.x），直接用Cookies.remove('cookieName')即可。
• 状态同步：清除Cookie后，记得手动同步面板的显示状态，不然页面上的折叠状态和Cookie状态会不一致。

内容的提问来源于stack exchange，提问作者carry0987