当前位置：首页 > JavaScript

js实现评论折叠与展开

2026-01-31 09:18:05JavaScript

实现评论折叠与展开的步骤

使用CSS控制显示与隐藏

通过CSS的display属性控制评论区域的显示状态。默认隐藏部分内容，点击按钮时切换状态。

.comment-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示行数 */
  -webkit-box-orient: vertical;
}
.comment-content.expanded {
  display: block;
  -webkit-line-clamp: unset;
}

HTML结构

创建包含评论内容和切换按钮的HTML结构。

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

JavaScript逻辑

通过事件监听实现点击按钮切换评论展开/折叠状态。

document.querySelectorAll('.toggle-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const content = this.previousElementSibling;
    content.classList.toggle('expanded');

    this.textContent = content.classList.contains('expanded') 
      ? '折叠' 
      : '展开';
  });
});

动态加载内容

若评论内容需要异步加载，可使用以下方法：

function loadComments() {
  fetch('/api/comments')
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('comments-container');
      data.forEach(comment => {
        container.innerHTML += `
          <div class="comment">
            <div class="comment-content">${comment.text}</div>
            <button class="toggle-btn">展开</button>
          </div>
        `;
      });
      // 重新绑定事件
      bindToggleEvents();
    });
}

function bindToggleEvents() {
  document.querySelectorAll('.toggle-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      // 同上文切换逻辑
    });
  });
}

动画效果增强

添加CSS过渡效果使展开/折叠更平滑。

.comment-content {
  max-height: 4.5em; /* 3行高度（假设行高1.5em） */
  transition: max-height 0.3s ease;
}
.comment-content.expanded {
  max-height: 1000px; /* 足够大的值容纳内容 */
}

多级评论处理

对于嵌套评论，可递归处理折叠状态。

function setupNestedComments(container) {
  container.querySelectorAll('.comment').forEach(comment => {
    const toggleBtn = comment.querySelector('.toggle-btn');
    if (toggleBtn) {
      toggleBtn.addEventListener('click', function() {
        // 切换当前评论和子评论
        comment.classList.toggle('expanded');
      });
    }
  });
}

通过以上方法可以实现基本的评论折叠与展开功能，同时支持动态加载和动画效果。根据实际需求可调整显示行数、动画时长等参数。

js实现评论折叠与展开