MediaWiki可折叠元素全局切换需求及侧边栏控件异常问题

需求说明 #

我在Timeless皮肤中使用mw-collapsible类设置内容默认折叠，需要实现两个功能：

• a) 点击切换折叠/展开状态后，所有使用该元素的页面都能保留这个状态
• b) 添加类似维基词典侧边栏「可见性」菜单的全局切换功能

针对需求b，已添加Gadgets下的Gadget-VisibilityToggles.js（含侧边栏标题添加代码）和Gadget-defaultVisibilityToggles.js，但侧边栏未显示切换控件。

当前模板代码（{{{trtx}}}代表可折叠内容）：

==Translations==
<span class="mw-customtoggle-1" style="font-size:12px; line-height:1.6; display:inline-block; float:right; margin: 6px;"><span class="mw-customtoggletext" style="border-radius: 10px; background:#5f5f62; color: #ffffff; padding: 6px">Show/Hide</span><br/>
<div id="mw-customcollapsible-1" class="mw-collapsible mw-collapsed"></span>
{{{trtx}}}
</div>

示例页面：fragment、θυσία

解决方案 #

需求a：跨页面保留折叠状态 #

MediaWiki默认折叠组件不支持状态持久化，需通过LocalStorage实现：

1. 给每个折叠元素设置唯一标识（建议用模板参数动态生成，避免页面内冲突，比如{{{id|1}}}替换固定数字）
2. 添加以下JS代码到MediaWiki:Common.js或对应Gadget：

$(document).ready(function() {
  $('.mw-collapsible').each(function() {
    const elemId = $(this).attr('id');
    const pageTitle = mw.config.get('wgTitle');
    const storageKey = `collapsibleState_${pageTitle}_${elemId}`;

    // 页面加载时恢复状态
    const savedState = localStorage.getItem(storageKey);
    if (savedState === 'expanded') {
      $(this).removeClass('mw-collapsed').addClass('mw-expanded');
    } else if (savedState === 'collapsed') {
      $(this).removeClass('mw-expanded').addClass('mw-collapsed');
    }

    // 监听切换事件并保存状态
    const toggleNum = elemId.split('-')[2];
    $(this).on('click', `.mw-customtoggle-${toggleNum}`, function() {
      const newState = $(this).closest('.mw-collapsible').hasClass('mw-collapsed') ? 'expanded' : 'collapsed';
      localStorage.setItem(storageKey, newState);
    });
  });
});

需求b：修复侧边栏全局切换控件不显示问题 #

维基词典的Gadget适配Vector皮肤，需修改代码适配Timeless皮肤结构：

1. 确认Special:Gadgets页面中对应Gadget已启用，且用户组权限正确
2. 替换Gadget-VisibilityToggles.js代码为以下内容：

$(document).ready(function() {
  // 创建可见性菜单
  const visibilityMenu = $('<div>').attr('id', 'p-visibility').addClass('portal');
  const menuHeader = $('<h3>').text('可见性');
  const menuContent = $('<div>').addClass('body').append(
    $('<ul>').append(
      $('<li>').append($('<a>').attr('href', '#').text('全部展开').click(function(e) {
        e.preventDefault();
        $('.mw-collapsible').removeClass('mw-collapsed').addClass('mw-expanded');
        // 同步更新本地存储
        $('.mw-collapsible').each(function() {
          const elemId = $(this).attr('id');
          const pageTitle = mw.config.get('wgTitle');
          const storageKey = `collapsibleState_${pageTitle}_${elemId}`;
          localStorage.setItem(storageKey, 'expanded');
        });
      })),
      $('<li>').append($('<a>').attr('href', '#').text('全部折叠').click(function(e) {
        e.preventDefault();
        $('.mw-collapsible').removeClass('mw-expanded').addClass('mw-collapsed');
        // 同步更新本地存储
        $('.mw-collapsible').each(function() {
          const elemId = $(this).attr('id');
          const pageTitle = mw.config.get('wgTitle');
          const storageKey = `collapsibleState_${pageTitle}_${elemId}`;
          localStorage.setItem(storageKey, 'collapsed');
        });
      }))
    )
  );

  // 插入Timeless皮肤侧边栏（DOM结构适配）
  $('#mw-panel .portal:last').after(visibilityMenu.append(menuHeader).append(menuContent));
});

3. 清除浏览器缓存，检查控制台是否有JS报错，根据报错调整代码

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