点击“查看更多”后获取隐藏div实际高度的问题

嘿，我完全懂你的困扰——你点击「view more」后立刻去拿.allcontent的高度，但这时候浏览器还没来得及完成元素的展开渲染，所以拿到的是它隐藏状态下的高度，不是完整展开后的真实值。

问题根源 #

当元素处于display: none状态时，浏览器不会计算它的真实布局高度；哪怕你刚调用了.show()，浏览器的重绘操作是异步的，立刻获取高度还是会拿到旧的、不准确的值。

解决方案：等待浏览器重绘后再获取高度 #

最可靠的方式是利用requestAnimationFrame，它会在浏览器下一次重绘前执行回调，这时候元素已经完全展开，高度计算就是准确的。同时，建议你把点击事件绑定到特定的按钮类上，避免和页面其他<a>标签冲突：

// 处理「view more」点击
$(document).on('click', '.morelink', function () {
    const $btn = $(this);
    const $allContent = $('.allcontent');
    const $shortContent = $('.shortcontent');

    // 先显示完整内容，隐藏短内容
    $allContent.show();
    $shortContent.hide();

    // 等待浏览器完成重绘后获取真实高度
    requestAnimationFrame(() => {
        const realHeight = $allContent.outerHeight(true);
        console.log('真实高度:', realHeight);
        // 这里写你需要用高度做的逻辑
    });

    // 切换按钮文字和类名，用于后续收起操作
    $btn.text(config.lessText).removeClass('morelink').addClass('lesslink');
});

// 处理「show less」点击
$(document).on('click', '.lesslink', function () {
    const $btn = $(this);
    const $allContent = $('.allcontent');
    const $shortContent = $('.shortcontent');

    $allContent.hide();
    $shortContent.show();
    $btn.text(config.moreText).removeClass('lesslink').addClass('morelink');
});

为什么这个方法有效？ #

requestAnimationFrame是浏览器提供的API，它会把回调函数加入到浏览器的重绘队列中，确保在页面更新渲染完成后再执行。相比用setTimeout(..., 0)，它更贴合浏览器的渲染周期，不会有不必要的延迟，也更可靠。

额外小提示 #

• 避免把点击事件绑定到所有<a>标签上，像上面那样用.morelink和.lesslink这类专属类，能减少意外的事件触发。
• 如果你的.allcontent包含动态加载的内容（比如图片），那可能还需要等待内容加载完成后再获取高度，可以给动态元素绑定load事件来处理。

内容的提问来源于stack exchange，提问作者Sona Shetty