Jquery 将溢出自动切换为隐藏，仍有滚动条空间

从溢出切换时出现问题：隐藏；要溢出：自动；，然后返回隐藏的文本不占用滚动条空间。请看我的

这是我的HTML

<div>
    <p>Lorem ipsum dolor .. lots of text here.</p>
</div>
<button id="switch">Switch div overflow</button>

jQuery

$('button').click(function(){
    if($('div').css('overflow') == 'hidden'){
        $('div').css({'overflow':'auto'});
    }else if($('div').css('overflow') == 'auto'){
        $('div').css({'overflow':'hidden'});
    }
});

$('button').click(function(){
    if($('div').css('overflow') == 'hidden'){
        $('div').css({'overflow':'auto'})

    }else if($('div').css('overflow') == 'auto'){
        $('div').css({'overflow':'hidden'});
        $('div').hide();
        $('div').height(); // no need to store this anywhere
        $('div').show();
    }
});

---

要执行此操作，请在删除自动溢出后再次重置宽度，这样将正确呈现文本

$('button').click(function(){
if($('div').css('overflow') == 'hidden'){
    $('div').css({'overflow':'auto'});
}else if($('div').css('overflow') == 'auto'){
    $('div').css({'overflow':'hidden'});
            var texts = $('div').text();
            $('div').text('');
            $('div').text(texts);
}

})

似乎你的就是问题所在

添加以下内容：

p{display:inline}

也使jquery变得简单了一点

$('button').click(function(){
    $('div').toggleClass('on');
});

这是一把小提琴：

您不需要重写内容，也不必担心它是div中的

您所需要做的就是强制broswer重新绘制元素。简单的方法是按顺序做这三件事

藏起来 呼叫。香草js中的离地高度 表现出来 jQuery

$('button').click(function(){
    if($('div').css('overflow') == 'hidden'){
        $('div').css({'overflow':'auto'});
    }else if($('div').css('overflow') == 'auto'){
        $('div').css({'overflow':'hidden'});
    }
});

$('button').click(function(){
    if($('div').css('overflow') == 'hidden'){
        $('div').css({'overflow':'auto'})

    }else if($('div').css('overflow') == 'auto'){
        $('div').css({'overflow':'hidden'});
        $('div').hide();
        $('div').height(); // no need to store this anywhere
        $('div').show();
    }
});

---

DOM会移动文本，但需要让它重新绘制。如果没有，则在为滚动条重新绘制文本后，将移动重新绘制的文本。你可以用一种更优雅的方式，但这是一个基本的例子。但是它是div中的html。切换类是一种更好的方式，只要向他显示如果更新了内容，你就可以正确地重新绘制它。不过我喜欢Filevr10的响应。知道如何重新绘制固然不错，但最好知道为什么会发生这种情况以及如何避免出现这种问题。这是因为不知道css属性导致的。对不起谢谢你。我以前试过移除，看到它工作正常，但不知道如何在打开时修复它：通过使用上面的答案。。。p{display:inline}。您不需要删除它，只需更改其显示属性。这将重新绘制内容，并重置p。。。实际上，您正在做您所说的两件您不需要做的事情，并且比更改导致问题的一个css属性付出了更多的努力。。。