使用JavaScript单击按钮后,如何动态调整HTML文档的大小？
单击菜单按钮后,有一个“站点包装器” div随着以下变换而减小：scale().但是单击之前文档的高度仍然存在.
它是这样的：
$('.hamburger').click(function(){
$(this).toggleClass('is-active');
if ($(this).hasClass('is-active')) {
$('.site-wrapper').css('transform','scale(0.5)');
$('.top-line').css('position','relative');
$('header').css('margin-top','0');
}
else{
$('.site-wrapper').css('transform','scale(1)');
}
});
最佳答案
事情就是转换了：scale()只是为了视觉效果,实际上并没有调整元素的大小.按照检查元素中的框模型进行确认.
因此,可以满足您的需求
>将即时包装元素添加到.site-wrapper-(例如.fluid-site-wrapper).
>添加样式ruletransform-origin：top;到.site-wrapper.
>在对.site-wrapper应用transform：scale()规则时,还应减小.fluid-site-wrapper的高度,反之亦然.
这会将您的代码更改为：
$('.hamburger').click(function(){
var $fluidSiteWrapper = $('.fluid-site-wrapper');
$(this).toggleClass('is-active');
if ($(this).hasClass('is-active')) {
$('.site-wrapper').css('transform','0');
$fluidSiteWrapper.css("height",$fluidSiteWrapper.height()/2); // if scale if 0.5
}
else{
$('.site-wrapper').css('transform','scale(1)');
$fluidSiteWrapper.css('height,'');
}
});
