javascript - 使用 JavaScript 或 jQuery 隐藏和显示元素

Question

我的网站上有一个箭头，如果单击，它会隐藏一个元素并显示另一个元素。再次点击它，将隐藏显示的元素并显示隐藏的元素。

比如我有

<div id="arrow"><a href="#">▾</a></div>

<div id="ad"></div>

<div id="description">Hidden</div>
<div id="nav">Also Hidden</div>

首先，广告会展示，然后当您点击箭头时，我希望广告隐藏，然后取消隐藏说明和导航。

Answer 1

对于 jQuery，使用 .toggle() :

$("#arrow").click(function () {
   $("#ad, #description, #nav").toggle();
});​

<强> DEMO 。

使用纯 JavaScript，您需要手动切换每个元素的 display 属性:

document.getElementById("arrow").onclick = function () {
    var description = document.getElementById("description"); 
    var nav = document.getElementById("nav"); 
    var ad = document.getElementById("ad");
    if (ad.style.display == 'none') {
      ad.style.display = '';
      nav.style.display = 'none';   
      description.style.display = 'none';
    } else {
      ad.style.display = 'none';
      nav.style.display = '';   
      description.style.display = '';
    }
};​​​​​​

<强> DEMO 。