WordPress如何实现仅在移动端关闭展开的details标签的最简方案

算力阿峰

2026-10-29

details 标签跨端默认状态适配方案（WordPress场景）

核心目标

桌面端完全保留原有 <details open> 的默认展开效果
移动端仅将原本默认展开的details改为默认关闭，不改动桌面端体验

最简实现（零改原有HTML结构）

直接在WordPress后台的自定义HTML小工具/主题自定义代码注入页脚位置，加入以下原生JS代码即可：

// 以768px为移动端判定阈值，可根据站点实际断点调整
if (window.innerWidth < 768) {
    // 页面加载完成后，移除所有默认展开的details的open属性
    window.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('details[open]').forEach(detailEl => {
            detailEl.removeAttribute('open');
        });
    })
}

进阶适配（处理视口尺寸动态变化场景）

如果需要支持用户拖动窗口跨端、手机旋转屏幕时同步调整details状态，可使用以下脚本，需给原有的默认展开的details标签加上default-open类标记：
调整后的原标签结构：

<details open class="default-open">
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

对应适配脚本：

function syncDetailsStatus() {
    const allDefaultOpenDetails = document.querySelectorAll('details.default-open');
    allDefaultOpenDetails.forEach(detailEl => {
        if (window.innerWidth < 768) {
            detailEl.removeAttribute('open');
        } else {
            detailEl.setAttribute('open', '');
        }
    })
}
// 页面加载完成执行
window.addEventListener('DOMContentLoaded', syncDetailsStatus);
// 视口尺寸变化时实时同步
window.addEventListener('resize', syncDetailsStatus);