用JavaScript实现文字展开与收起功能

在网页设计中，为了提升用户体验和页面的简洁性，常常需要实现文字展开与收起的功能。通过JavaScript，我们能够轻松达成这一目标。

创建HTML结构。假设有一段较长的文本，我们希望将其初始状态设为收起。可以这样构建代码：

<div class="text-container">
    <p id="longText">这是一段很长很长的文本内容，包含了丰富的信息……</p>
    <button id="toggleButton">展开</button>
</div>

这里，“text-container”类用于对相关元素进行整体布局，“longText”段落存放长文本，“toggleButton”按钮用于触发展开和收起操作。

接着，编写CSS样式，让页面布局更美观。可以设置“longText”的高度，使其在初始状态下显示部分内容，并设置溢出隐藏。例如：

.text-container {
    position: relative;
}
#longText {
    height: 2em;
    overflow: hidden;
    transition: height 0.3s ease;
}

这里的过渡效果可以让展开和收起的动作更加平滑。

最后，重头戏——使用JavaScript实现功能逻辑。

const longText = document.getElementById('longText');
const toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener('click', function() {
    if (longText.style.height === '2em') {
        longText.style.height = 'auto';
        toggleButton.textContent = '收起';
    } else {
        longText.style.height = '2em';
        toggleButton.textContent = '展开';
    }
});

这段代码首先获取了文本段落和按钮元素。然后，通过为按钮添加点击事件监听器，实现状态的切换。当文本高度为初始的“2em”时，将其高度设为“auto”以完全显示，并更改按钮文本为“收起”；反之，当文本完全显示时，将高度恢复为“2em”，按钮文本变回“展开”。

通过上述HTML、CSS和JavaScript的协同工作，就成功实现了文字展开与收起的功能。这一功能在展示长文章摘要、产品描述等场景中十分实用，能够有效提升页面的可读性和用户操作的便捷性。开发者还可以进一步优化，如根据文本实际长度自动判断是否需要显示展开收起按钮，或者添加动画效果等，为用户带来更出色的体验。