本文旨在解决在使用 CSS max-height 属性实现“Read More”功能时，内容无法完全隐藏的问题。通常，即使设置 max-height: 0px 和 overflow: hidden，内容仍然会显示一小部分。本文将详细解释问题原因，并提供解决方案，同时提供优化 JavaScript 代码的建议，以实现更简洁的交互逻辑。
问题分析
在使用 max-height: 0px; overflow: hidden; 隐藏元素时，如果元素本身或者其父元素设置了 padding，border 或 margin，这些属性所占据的空间仍然会显示出来，导致内容无法完全隐藏。这是因为 overflow: hidden 只会隐藏超出 max-height 的内容，但不会影响元素的 padding、border 或 margin。
解决方案
要解决这个问题，需要在隐藏元素时，同时移除其 padding。在显示元素时，再将 padding 添加回去。以下是一个示例 CSS 代码：
.element {
max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-out;
padding: 0px 40px 20px 40px; /* 初始状态，有 padding */
&.active {
max-height: auto; /* 或者根据内容高度设置 */
padding: 0px 40px 20px 40px; /* 展开状态，恢复 padding */
}
}在上述代码中，.element 初始状态设置了 padding，同时 max-height 为 0px，overflow 为 hidden，意味着该元素应该被隐藏。当 .element 添加了 .active 类时，max-height 恢复为 auto（或者根据实际内容高度进行设置），并且 padding 也被恢复，元素的内容就能正常显示了。
立即学习“前端免费学习笔记（深入）”；
注意事项：
- 确保在 JavaScript 代码中，正确地切换 .active 类的添加和移除。
- max-height 的值可以设置为 auto，也可以设置为具体的高度值，具体取决于实际需求。如果内容高度不固定，建议设置为 auto。
- transition 属性可以控制展开/折叠的动画效果，可以根据实际需要进行调整。
JavaScript 代码优化建议
以下是一个优化 JavaScript 代码的示例，用于简化 "Read More" 功能的实现：
const accordionEls = document.getElementsByClassName("accordion");
// 添加事件监听器
Array.from(accordionEls).map(element => {
element.addEventListener("click", toggleVisibility)
});
function toggleVisibility(event) {
// 获取事件触发元素
const { currentTarget } = event;
// 生成需要切换的元素的类名
const classNames = [
"platforms",
"countries",
"licensed",
"support",
"established"
].map(name => `.review_page__${name}`);
// 获取需要切换的元素
const toggleElements = classNames
.map(className => document.querySelector(className))
.filter(Boolean);
// 切换 "Read More" 按钮的 active 类
currentTarget.classList.toggle("active");
// 循环切换元素的最大高度
toggleElements.map(el => {
const currentMaxHeight = el.style.maxHeight;
const maxHeight = currentMaxHeight ? null : `${el.scrollHeight}px`;
el.style.maxHeight = maxHeight;
});
}代码解释：
- getElementsByClassName("accordion"): 获取所有类名为 "accordion" 的元素，这些元素通常是 "Read More" 按钮。
- Array.from(accordionEls).map(...): 将 HTMLCollection 转换为数组，并遍历每个 "Read More" 按钮。
- addEventListener("click", toggleVisibility): 为每个 "Read More" 按钮添加点击事件监听器，当按钮被点击时，toggleVisibility 函数会被调用。
-
toggleVisibility(event): 该函数处理点击事件。
- currentTarget: 获取触发事件的元素（即 "Read More" 按钮）。
- classNames: 生成需要切换的元素的 CSS 类名数组。
- toggleElements: 使用 document.querySelector 获取需要切换的元素，并过滤掉不存在的元素。
- currentTarget.classList.toggle("active"): 切换 "Read More" 按钮的 .active 类，用于改变按钮的样式。
-
toggleElements.map(...): 遍历需要切换的元素，并切换其 max-height 属性。
- currentMaxHeight: 获取元素的当前 max-height 值。
- maxHeight: 如果当前 max-height 存在，则将其设置为 null，否则设置为元素的 scrollHeight，即内容的高度。
- el.style.maxHeight = maxHeight: 设置元素的 max-height 属性。
总结：
通过移除隐藏元素时的 padding，可以解决 max-height 属性无法完全隐藏内容的问题。同时，优化 JavaScript 代码可以使代码更简洁、易于维护。在实际应用中，需要根据具体情况调整 CSS 和 JavaScript 代码，以达到最佳效果。
