javascript和jquery实现页面元素显示/隐藏切换的方法

一、javascript实现

方法一：

document.getElementById("idname").style.visibility="hidden";
document.getElementById("idname").style.visibility="visible";
注：该方法隐藏元素之后，仍占用空间，显示出空白区域

 方法二：

document.getElementById("idname").style.display="none";
document.getElementById("idname").style.display="inline";
注：该方法隐藏元素之后，不占用空间

jquery：

$("selector").hide();
$("selector").show();
注：隐藏后不占用位置

属性中设置，可实现元素隐藏。

style="display: none;"

二、使用jQuery实现

jQuery有6个相关方法可以用于实现该功能，可以分为两类：

1、直接显示或隐藏

$( "#div1").show();    若原状态为隐藏，则将其显示

$( "#div1").hide();     若原状态为显示，则将其隐藏

$( "#div1").toggle();   该方法是上面两个方法的综合，隐藏变显示，显示变隐藏。

2、拉动式显示或隐藏

$( "#div1").slideUp();            若原状态为显示，则将其从下向上收回

$( "#div1").slideDown();       若原状态为隐藏，则将其从上向下显示

$( "#div1").slideToggle();      该方法是上面两个方法的综合