Widget:Zhedie

展开折叠。需要对按钮和内容指定class和data标签。具有相同data标签的按钮均可控制对应内容

支持的HTML示例：

<!-- 第一组 -->
<p class="zhedie-button" data-zhedie="info-pannel1" tabindex="0">【展开/折叠 第一组】</p>
<div class="zhedie-content" data-zhedie="info-pannel1">
这是第一组的内容。
</div>

<!-- 第二组 -->
<div class="zhedie-button" data-zhedie="info-pannel2" tabindex="0">【展开/折叠 第二组】</div>
<p class="zhedie-content" data-zhedie="info-pannel2">
这是第二组的内容。
</p>

CSS类 zhedie-button 是按钮，zhedie-content 是内容。

按钮在点击时，隐藏/显示与其 data-zhedie 属性相同的内容（显示的内容带有CSS类 zhedie-active，激活的按钮带有类 zhedie-active ）。

支持多个按钮和多个内容具有相同的 data-zhedie 属性。

可以通过定义css样式来为激活的按钮定制外观（用于切换显示隐藏的CSS位于Widget中，运行时注入）。

源码：

<script>
(function () {
    'use strict';
    const Zhedie = {
        // CSS类名配置
        classNames: {
            button: 'zhedie-button', // 控制折叠的按钮 class 名
            content: 'zhedie-content', // 可折叠内容的 class 名
            hidden: 'zhedie-hidden', // 内容展开时的 class 名
            active: 'zhedie-active' // 按钮激活时的 class 名
        },

        // 初始化函数
        init() {
            if(window.Zhedie_loaded){
                console.log("Widget:Zhedie 已经加载过了");
                return;
            }
            this.injectStyles();
            this.onDocumentReady(() => {
                document.addEventListener('click', this.handleClick.bind(this), false);
                document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
            });
            window.Zhedie_loaded = true;
        },

        // 文档加载完成后执行
        onDocumentReady(callback) {
            if (document.readyState === 'complete' || document.readyState === 'interactive') {
                callback();
            } else {
                document.addEventListener('DOMContentLoaded', callback);
            }
        },

        // 注入必要的CSS样式
        injectStyles() {
            const css = `
                .${this.classNames.content}.${this.classNames.hidden} {
                    display:none;
                }
                
                .${this.classNames.button} {
                    cursor: pointer;
                }
            `;
            const style = document.createElement('style');
            style.appendChild(document.createTextNode(css));
            document.head.appendChild(style);
        },

        // 处理点击事件
        handleClick(event) {
            const zhedieBtn = event.target.closest(`.${this.classNames.button}`);
            if (zhedieBtn) {
                this.toggleContent(zhedieBtn);
            }
        },

        // 处理键盘事件（无障碍支持）
        handleKeyDown(event) {
            if (event.key === 'Enter' || event.key === ' ') {
                const zhedieBtn = event.target.closest(`.${this.classNames.button}`);
                if (zhedieBtn) {
                    event.preventDefault(); // 防止不必要的滚动
                    this.toggleContent(zhedieBtn);
                }
            }
        },

        // 切换内容显示/隐藏
        toggleContent(btn) {
            const zhedieId = btn.getAttribute('data-zhedie');
            if (!zhedieId) return;

            const contents = document.querySelectorAll(`.${this.classNames.content}[data-zhedie="${CSS.escape(zhedieId)}"]`);
            const btns = document.querySelectorAll(`.${this.classNames.button}[data-zhedie="${CSS.escape(zhedieId)}"]`);

            // 切换所有相关内容的 状态
            contents.forEach(content => {
                if (content.classList.contains(this.classNames.hidden)) {
                    content.classList.remove(this.classNames.hidden);
                    content.classList.add(this.classNames.active);
                } else {
                    content.classList.remove(this.classNames.active);
                    content.classList.add(this.classNames.hidden);
                }
            });

            // 切换所有相关按钮的 状态
            btns.forEach(button => {
                if (button.classList.contains(this.classNames.active)) {
                    button.classList.remove(this.classNames.active);
                } else {
                    button.classList.add(this.classNames.active);
                }
            });
        }
    };

    Zhedie.init();
})();
</script>