内容隐藏/显示设计调整

Question

我一开始只是隐藏了 wordpress 主页的内容，并在单击按钮时显示。但是当显示内容时，由于扩大了 div，设计会变得混乱。请查看网站 - iamicongroup.com

if (! sessionStorage.firstVisit) {
// hide the element
$("#content").hide();

// check this flag for escaping this if block next time
sessionStorage.firstVisit = "1";
}
$(".roll-button").click(function(){
$("#content").show();
});

Answer 1

尝试使用 transform 和 height 属性来隐藏它，而不是显示隐藏：

if (! sessionStorage.firstVisit) {
  $("#content").css({'transform':'scaleY(0)','height':0});
  sessionStorage.firstVisit = "1";
}

$(".roll-button").click(function(){
  $("#content").css({'transform':'scaleY(1)','height':'auto'});
});