如何简化内容展开切换按钮的冗余代码？支持jQuery方案

原生JS简化方案 #

核心思路是利用事件委托减少重复绑定，用CSS类控制显示状态，避免冗余的DOM操作。

HTML结构

<div class="expandable-box">
  <div class="content">
    <!-- 初始显示的少量内容 -->
    这里是默认展示的简短内容...
    <!-- 更多内容 -->
    <div class="extra-content">
      这里是点击展开后显示的大量额外信息，比如详细说明、列表、数据等...
    </div>
  </div>
  <button class="toggle-btn">See More</button>
  <button class="copy-btn" style="display:none;">Copy</button>
</div>

<!-- 可重复添加多个相同结构的盒子 -->
<div class="expandable-box">
  <!-- 同上结构 -->
</div>

CSS样式

用类控制内容展开/收起状态，比直接操作style更高效且易维护：

.expandable-box .content {
  max-height: 80px; /* 初始显示高度，根据实际内容调整 */
  overflow: hidden;
  transition: max-height 0.3s ease; /* 可选：添加平滑过渡动画 */
}

.expandable-box.expanded .content {
  max-height: 1000px; /* 设置足够大的值容纳全部内容 */
}

.copy-btn {
  margin-left: 10px;
}

JS代码

// 事件委托：仅绑定一次事件，处理所有按钮交互
document.addEventListener('click', function(e) {
  const targetBtn = e.target;
  
  // 处理展开/收起按钮逻辑
  if (targetBtn.classList.contains('toggle-btn')) {
    const parentBox = targetBtn.closest('.expandable-box');
    const isExpanded = parentBox.classList.toggle('expanded');
    
    // 切换按钮文本
    targetBtn.textContent = isExpanded ? 'See Less' : 'See More';
    // 显示/隐藏复制按钮
    parentBox.querySelector('.copy-btn').style.display = isExpanded ? 'inline-block' : 'none';
  }
  
  // 处理复制按钮逻辑（可选）
  else if (targetBtn.classList.contains('copy-btn')) {
    const fullContent = targetBtn.closest('.expandable-box').querySelector('.content').textContent;
    navigator.clipboard.writeText(fullContent);
    
    // 可选：添加复制成功反馈
    targetBtn.textContent = 'Copied!';
    setTimeout(() => targetBtn.textContent = 'Copy', 1500);
  }
});

jQuery简化方案 #

利用jQuery的链式调用和选择器优势，进一步精简代码：

HTML结构（与原生JS一致）

<div class="expandable-box">
  <div class="content">
    这里是默认展示的简短内容...
    <div class="extra-content">
      这里是点击展开后显示的大量额外信息...
    </div>
  </div>
  <button class="toggle-btn">See More</button>
  <button class="copy-btn" style="display:none;">Copy</button>
</div>

CSS样式（与原生JS一致）

.expandable-box .content {
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.expandable-box.expanded .content {
  max-height: 1000px;
}

.copy-btn {
  margin-left: 10px;
}

jQuery代码

// 处理展开/收起按钮
$(document).on('click', '.toggle-btn', function() {
  const $parentBox = $(this).closest('.expandable-box');
  const isExpanded = $parentBox.toggleClass('expanded').hasClass('expanded');
  
  // 切换按钮文本
  $(this).text(isExpanded ? 'See Less' : 'See More');
  // 切换复制按钮显示状态
  $parentBox.find('.copy-btn').toggle(isExpanded);
});

// 处理复制按钮逻辑（可选）
$(document).on('click', '.copy-btn', function() {
  const fullContent = $(this).closest('.expandable-box').find('.content').text();
  navigator.clipboard.writeText(fullContent);
  
  const $btn = $(this);
  $btn.text('Copied!');
  setTimeout(() => $btn.text('Copy'), 1500);
});

简化核心要点 #

1. 事件委托：无需给每个按钮单独绑定事件，仅在document上绑定一次，自动适配新增的盒子，适合动态生成内容的场景。
2. 类名控制状态：用.expanded类统一管理盒子的展开/收起状态，CSS负责样式变化，JS仅需切换类名，逻辑更清晰。
3. DOM关系复用：通过closest()/find()等方法基于点击元素定位对应盒子，无需依赖唯一ID，代码通用性更强。
4. 减少重复代码：将相同逻辑抽象到事件委托的回调中，避免重复编写多个相同的事件处理函数。

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