WordPress 在移动端添加一个“显示/隐藏目录”的按钮

很好的问题 👍。
在 WordPress 主题中想要 在移动端添加一个“显示/隐藏目录”的按钮（一般用于显示文章的目录 TOC，例如使用 Table of Contents 插件或主题自带目录），可以通过简单的 HTML + CSS + JS 来实现响应式控制。

我来一步步教你：

🧩 一、实现目标

当页面在移动端访问时：

• 页面顶部或侧边出现一个「目录」按钮（例如“☰ 目录”）。
• 点击按钮后，显示或隐藏文章的目录内容。
• 在桌面端目录仍然固定显示。

🧱 二、HTML 结构示例

假设你的目录是通过插件（如 Easy Table of Contents、LuckyWP TOC 等）生成的，
目录 HTML 一般长这样：

<div id="toc-container" class="toc">

<h2>目录</h2>

<ul>

<li><a href="#section1">一、简介</a></li>

<li><a href="#section2">二、安装</a></li>
  </ul>
</div>

我们只需在它前面加一个按钮：

<button id="toc-toggle-btn" class="toc-toggle">☰ 目录</button>

建议把这段放在 single.php（或主题的 content-single.php）中目录输出的前面。

🎨 三、CSS 控制样式（移动端隐藏/显示）

/* 默认按钮隐藏（桌面端） */
#toc-toggle-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  padding: 10px 14px;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

/* 移动端样式 */
@media (max-width: 768px) {
  #toc-toggle-btn {
    display: block;
  }

  #toc-container {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 998;
    border-top: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px;
  }

  #toc-container.active {
    display: block;
  }
}

⚙️ 四、JS 控制显示/隐藏逻辑

可以直接写在主题的 footer.php 里（</body> 前），或者放到主题 JS 文件里：

<script>
document.addEventListener("DOMContentLoaded", function() {
  const tocBtn = document.getElementById('toc-toggle-btn');
  const tocContainer = document.getElementById('toc-container');

  if (tocBtn && tocContainer) {
    tocBtn.addEventListener('click', () => {
      tocContainer.classList.toggle('active');
    });
  }
});
</script>

🧠 五、可选优化

1. 点击目录外部区域关闭目录

    document.addEventListener('click', (e) => {
      if (tocContainer.classList.contains('active') &&
          !tocContainer.contains(e.target) &&
          e.target !== tocBtn) {
        tocContainer.classList.remove('active');
      }
    });

2. 滑动动画 可加上：

    #toc-container {
      transition: all 0.3s ease;
    }

3. 与插件兼容 如果你使用 Easy Table of Contents 插件，可以用以下选择器：

    const tocContainer = document.querySelector('#ez-toc-container');

📱 效果

在桌面端：

• 目录正常显示（无需按钮）

在移动端：

• 页面右下角出现一个「☰ 目录」按钮
• 点击按钮 → 弹出目录层
• 再次点击 → 收起