js实现评论折叠与展开
实现评论折叠与展开的思路
通过动态控制CSS样式或DOM元素的显示与隐藏，结合点击事件实现交互效果。核心是利用display: none或height属性切换，配合动画增强体验。
基础DOM结构示例
<div class="comment">
<div class="comment-content">这里是评论内容...</div>
<button class="toggle-btn">展开/折叠</button>
</div>方法一：通过classList切换
document.querySelectorAll('.toggle-btn').forEach(btn => {
btn.addEventListener('click', () => {
const content = btn.previousElementSibling;
content.classList.toggle('collapsed');
btn.textContent = content.classList.contains('collapsed') ? '展开' : '折叠';
});
});配套CSS：
.comment-content.collapsed {
display: none;
}方法二：使用style属性直接控制
document.querySelectorAll('.toggle-btn').forEach(btn => {
let isCollapsed = false;
btn.addEventListener('click', () => {
const content = btn.previousElementSibling;
content.style.display = isCollapsed ? 'block' : 'none';
btn.textContent = isCollapsed ? '折叠' : '展开';
isCollapsed = !isCollapsed;
});
});方法三：添加动画效果
通过CSS transition实现平滑过渡：
.comment-content {
max-height: 1000px;
transition: max-height 0.3s ease;
overflow: hidden;
}
.comment-content.collapsed {
max-height: 0;
}JavaScript部分与方法一相同。
方法四：Vue实现方案
<template>
<div>
<div :class="{ 'collapsed': isCollapsed }" class="comment-content">
{{ content }}
</div>
<button @click="toggle">{{ isCollapsed ? '展开' : '折叠' }}</button>
</div>
</template>
<script>
export default {
data() {
return {
isCollapsed: false
}
},
methods: {
toggle() {
this.isCollapsed = !this.isCollapsed;
}
}
}
</script>方法五：React实现方案
function Comment({ content }) {
const [isCollapsed, setIsCollapsed] = useState(false);
return (
<div>
<div className={isCollapsed ? 'comment-content collapsed' : 'comment-content'}>
{content}
</div>
<button onClick={() => setIsCollapsed(!isCollapsed)}>
{isCollapsed ? '展开' : '折叠'}
</button>
</div>
);
}注意事项
- 确保折叠后不影响页面布局，可能需要预留占位空间
- 移动端考虑添加触摸反馈效果
- 对长文本建议设置
text-overflow: ellipsis部分显示 - 无障碍访问需添加
aria-expanded属性
以上方案可根据实际需求选择或组合使用，动画方案适合对用户体验要求较高的场景，基础方案适合快速实现功能。
