当前位置：首页 > JavaScript

js实现评论折叠与展开

2026-04-05 01:20:30JavaScript

实现评论折叠与展开的基本思路

通过动态控制CSS的display属性或高度变化实现折叠/展开效果。核心是利用DOM操作和事件监听，结合CSS过渡动画提升用户体验。

HTML结构示例

<div class="comment">
  <div class="comment-content">这里是评论内容...</div>
  <button class="toggle-btn">展开</button>
</div>

CSS样式

.comment-content {
  max-height: 60px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

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

JavaScript实现方案

方案1：类名切换法

document.querySelectorAll('.toggle-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.previousElementSibling;
    content.classList.toggle('expanded');
    btn.textContent = content.classList.contains('expanded') ? '收起' : '展开';
  });
});

方案2：动态高度计算

function toggleComment(btn) {
  const content = btn.parentElement.querySelector('.comment-content');
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    btn.textContent = '展开';
  } else {
    content.style.maxHeight = content.scrollHeight + 'px';
    btn.textContent = '收起';
  }
}

多级评论实现

对于嵌套评论结构，需要递归处理子元素：

js实现评论折叠与展开

function initCommentToggle() {
  document.querySelectorAll('.comment').forEach(comment => {
    const btn = comment.querySelector('.toggle-btn');
    const content = comment.querySelector('.comment-content');

    btn.addEventListener('click', () => {
      content.classList.toggle('expanded');
      btn.textContent = content.classList.contains('expanded') 
        ? '收起' 
        : `展开（${comment.querySelectorAll('.reply').length}条回复）`;
    });
  });
}

性能优化建议

使用事件委托减少监听器数量
对于长列表实现虚拟滚动

添加防抖处理快速点击

document.body.addEventListener('click', e => {
if (e.target.classList.contains('toggle-btn')) {
  // 处理逻辑
}
});

完整组件实现

class CommentToggle {
  constructor(container) {
    this.container = document.querySelector(container);
    this.init();
  }

  init() {
    this.container.addEventListener('click', e => {
      if (e.target.classList.contains('toggle-btn')) {
        this.toggle(e.target);
      }
    });
  }

  toggle(btn) {
    const content = btn.closest('.comment').querySelector('.comment-content');
    const isExpanded = content.classList.toggle('expanded');
    btn.textContent = isExpanded ? '收起' : '展开';
  }
}

new CommentToggle('.comments-container');