WordPress+Elementor博客：jQuery显示隐藏按钮与文本切换开发需求

实现思路 #

通过数据属性关联按钮与目标内容，用原生JavaScript实现点击切换逻辑，代码可无限复用，无需为每组单独编写专属代码。

1. HTML结构（Elementor自定义HTML模块） #

将以下代码粘贴到Elementor的「自定义HTML」模块中，如需新增组，直接复制整组代码并修改id和内容即可：

<!-- 第1组 -->
<div class="toggle-group">
  <button class="toggle-btn" data-target="toggle-content-1">
    <span class="show-text">显示内容</span>
    <span class="hide-text" style="display: none;">隐藏内容</span>
  </button>
  <div id="toggle-content-1" class="toggle-content" style="display: none;">
    这里是第1组要显示/隐藏的段落内容，可自定义编辑。
  </div>
</div>

<!-- 第2组 -->
<div class="toggle-group">
  <button class="toggle-btn" data-target="toggle-content-2">
    <span class="show-text">显示内容</span>
    <span class="hide-text" style="display: none;">隐藏内容</span>
  </button>
  <div id="toggle-content-2" class="toggle-content" style="display: none;">
    这里是第2组要显示/隐藏的段落内容，可自定义编辑。
  </div>
</div>

<!-- 第3组 -->
<div class="toggle-group">
  <button class="toggle-btn" data-target="toggle-content-3">
    <span class="show-text">显示内容</span>
    <span class="hide-text" style="display: none;">隐藏内容</span>
  </button>
  <div id="toggle-content-3" class="toggle-content" style="display: none;">
    这里是第3组要显示/隐藏的段落内容，可自定义编辑。
  </div>
</div>

2. JavaScript逻辑（添加到主题自定义JS） #

在WordPress后台「外观」→「自定义」→「额外JavaScript」中粘贴以下代码，或通过Elementor的「自定义代码」模块添加（类型选「脚本」，位置选「页脚」）：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const toggleBtns = document.querySelectorAll('.toggle-btn');
  
  toggleBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      // 获取目标内容ID并找到对应元素
      const targetId = this.getAttribute('data-target');
      const targetContent = document.getElementById(targetId);
      
      // 切换内容显示状态
      if (targetContent.style.display === 'none') {
        targetContent.style.display = 'block';
        // 切换按钮文本
        this.querySelector('.show-text').style.display = 'none';
        this.querySelector('.hide-text').style.display = 'inline';
      } else {
        targetContent.style.display = 'none';
        // 切换按钮文本
        this.querySelector('.show-text').style.display = 'inline';
        this.querySelector('.hide-text').style.display = 'none';
      }
    });
  });
});

3. 自定义样式（可选） #

如需美化按钮和内容样式，添加以下CSS到「外观」→「自定义」→「额外CSS」：

.toggle-btn {
  padding: 8px 16px;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 10px 0;
}

.toggle-btn:hover {
  background: #006799;
}

.toggle-content {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 5px;
  line-height: 1.6;
}

操作说明 #

1. 在Elementor编辑页面时，拖拽「自定义HTML」模块到目标位置，粘贴上述HTML代码。
2. 如需新增更多组，复制<div class="toggle-group">...</div>块，修改data-target值和对应内容的id（保证每组ID唯一）。
3. 将JS代码添加到主题自定义JS区域，确保页面加载时能触发事件。
4. 可选添加CSS样式，匹配博客主题风格。

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