JS隱藏和顯示div的方式有兩種：
方式1：隱藏后釋放占用的頁面空間
通過設置display屬性可以使div隱藏后釋放占用的頁面空間.
style="display: none;"
document.getElementById("demo").style.display="none";//隱藏
document.getElementById("demo").style.display="";//顯示
方式2：隱藏后仍占有頁面空間，顯示空白
div的visibility可以控制div的顯示和隱藏，但是隱藏后頁面顯示空白.
style="visibility: none;"
document.getElementById("demo").style.visibility="hidden";//隱藏
document.getElementById("demo").style.visibility="visible";//顯示
注意：
使用第二方式更人性化，但是，用div.style.display="none"隱藏會引起，div里面的東西休眠，里面的事件就不響應了。
jQuery隱藏和顯示div的方式：
1、$("#demo").attr("style","display:none;");//隱藏div
$("#demo").attr("style","display:block;");//顯示div
2、$("#demo").css("display","none");//隱藏div
$("#demo").css("display","block");//顯示div
3、$("#demo").hide();//隱藏div
$("#demo").show();//顯示div
4、$("#demo").toggle(//動態顯示和隱藏
function () {
$(this).attr("style","display:none;");//隱藏div
},
function () {
$(this).attr("style","display:block;");//顯示div
}
);
<div id="demo"></div>
注：
$("#demo").show()表示display:block,
$("#demo").hide()表示display:none;
方法1 和 方法2 中的 display:none 可以換成 visibility:hidden，display:block可以換成 visibility:visible .兩者的區別是前者隱藏后不占空間，而后者隱藏后會占空間
原文鏈接：https://blog.csdn.net/qq_36135335/article/details/82754202