<think>我们正在处理用户关于JavaScript
展开收起功能的请求。用户明确要求提供实现该功能的代码示例。根据引用[1]中提供的示例，我们可以看到一个基本的实现方式：通过切换类名来改变元素的高度，并更新按钮文本。同时，引用[3]展示了纯CSS的实现方法，但用户明确要求JavaScript，因此我们主要参考引用[1]。我们将构建一个简单的示例：1.HTML结构：包含一个包裹元素（.wrapper），一个内容元素（.content）和一个按钮（.toggle-button）。2.CSS：初始时，内容元素的高度为0（或根据需求设定），当
展开时，高度设置为内容的实际高度（通过scrollHeight获取）。3.JavaScript：为按钮添加点击事件，切换
展开状态，并动态调整内容高度和按钮文本。注意：引用[1]中的代码已经比较清晰，但我们可以进行一些改进，例如添加过渡动画（使用CSStransition）以及处理动态内容变化。然而，用户要求的是JavaScript示例，所以我们重点放在JavaScript上。我们提供两种方式：方式一：直接切换高度（无动画）方式二：使用CSStransition添加平滑过渡（需要设置固定的高度变化，但内容高度不固定，我们可以使用max-height并设置为一个足够大的值，或者使用requestAnimationFrame动态设置高度）考虑到简单性，我们先展示无动画的版本（如引用[1]），然后展示有动画的版本。另外，我们还可以参考引用[3]中的一些思路，比如使用伪元素和CSS选择器，但那是纯CSS方案，我们这里不采用。因此，我们将编写两个示例：示例1：基本
展开收起（无动画）示例2：带平滑过渡的
展开收起同时，我们也会考虑可访问性，例如为按钮添加aria-expanded属性。下面开始构建代码示例。</think>下面我将详细介绍使用JavaScript实现
展开/
收起功能的完整方案，并提供多种实现方式的代码示例：
### 一、基础实现方案（无动画效果）
```html
<div class="content-wrapper">
<div class="content" style="height: 60px; overflow: hidden;">
这里是需要
展开/
收起的长文本内容。当内容超过指定高度时，显示"
展开"按钮...
</div>
<button class="toggle-btn">
展开</button>
</div>
<script>
const content = document.querySelector('.content');
const toggleBtn = document.querySelector('.toggle-btn');
toggleBtn.addEventListener('click', () => {
const isExpanded = content.style.height === 'auto';
if (isExpanded) {
content.style.height = '60px'; //
收起高度
toggleBtn.textContent = '
展开';
} else {
content.style.height = 'auto'; //
展开高度
toggleBtn.textContent = '
收起';
}
});
</script>
```
### 二、平滑过渡动画方案
```html
<style>
.content {
transition: height 0.3s ease;
overflow: hidden;
height: 60px;
}
</style>
<script>
const content = document.querySelector('.content');
const toggleBtn = document.querySelector('.toggle-btn');
toggleBtn.addEventListener('click', () => {
if (content.classList.contains('expanded')) {
content.style.height = '60px';
toggleBtn.textContent = '
展开';
} else {
content.style.height = `${content.scrollHeight}px`;
toggleBtn.textContent = '
收起';
}
content.classList.toggle('expanded');
});
// 处理窗口大小变化
window.addEventListener('resize', () => {
if (content.classList.contains('expanded')) {
content.style.height = 'auto';
content.style.height = `${content.scrollHeight}px`;
}
});
</script>
```
### 三、多行文本省略号方案
```html
<style>
.content {
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示行数 */
-webkit-box-orient: vertical;
overflow: hidden;
}
.expanded {
-webkit-line-clamp: unset !important;
display: block !important;
}
</style>
<script>
const content = document.querySelector('.content');
const toggleBtn = document.querySelector('.toggle-btn');
toggleBtn.addEventListener('click', () => {
content.classList.toggle('expanded');
toggleBtn.textContent = content.classList.contains('expanded')
? '
收起' : '
展开';
});
</script>
```
### 四、动态内容自适应方案
```javascript
function initToggle(containerSelector) {
const container = document.querySelector(containerSelector);
const content = container.querySelector('.content');
const toggleBtn = container.querySelector('.toggle-btn');
// 初始检查是否需要显示按钮
if (content.scrollHeight <= content.clientHeight) {
toggleBtn.style.display = 'none';
}
toggleBtn.addEventListener('click', () => {
const isExpanded = content.style.maxHeight === 'none';
if (isExpanded) {
content.style.maxHeight = '60px';
toggleBtn.textContent = '
展开';
} else {
content.style.maxHeight = 'none';
toggleBtn.textContent = '
收起';
}
});
}
// 初始化所有实例
initToggle('.container-1');
initToggle('.container-2');
```
### 五、最佳实践建议
1. **可访问性优化**：
```javascript
toggleBtn.setAttribute('aria-expanded', 'false');
// 点击时更新
toggleBtn.setAttribute('aria-expanded', !isExpanded);
```
2. **性能优化**：
```javascript
// 使用requestAnimationFrame优化动画
requestAnimationFrame(() => {
content.style.height = `${content.scrollHeight}px`;
});
```
3. **响应式处理**：
```javascript
window.addEventListener('resize', () => {
if (content.classList.contains('expanded')) {
content.style.height = 'auto';
setTimeout(() => {
content.style.height = `${content.scrollHeight}px`;
}, 0);
}
});
```
### 六、常见问题解决
1. **内容抖动问题**：
```css
.content {
transition: height 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
```
2. **动态内容更新**：
```javascript
function updateContent() {
if (content.classList.contains('expanded')) {
content.style.height = `${content.scrollHeight}px`;
}
}
```
3. **嵌套元素边距问题**：
```css
.content > *:first-child {
margin-top: 0;
}
.content > *:last-child {
margin-bottom: 0;
}
```
这些方案可根据实际需求组合使用，基础方案适合简单场景，动画方案提供更好用户体验，多行文本方案适合精确控制显示行数[^1]。动态内容方案则适用于频繁更新内容的场景[^2]。
扫一扫
2118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
