内容隐藏/显示设计调整

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'});
});