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

Question

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

例如，我有

<div id="arrow"><a href="#">▾&lt;/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();
});​

演示。

使用纯 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 = '';
    }
};​​​​​​

演示。

Answer 2

试试这个（因为你要求纯 javascript）

window.onload=function(){
    var arrow=document.getElementById('arrow').getElementsByTagName('a')[0];
    arrow.onclick=function(){
        var ad=document.getElementById('ad');
        var description=document.getElementById('description');
        var nav=document.getElementById('nav');
        if(ad.style.display=='none')
        {
            ad.style.display='block';
            description.style.display='none';
            nav.style.display='none';
        }
        else
        {
            ad.style.display='none';
            description.style.display='block';
            nav.style.display='block';
        }
        return false;

    };
};

演示。​</p>

Answer 3

演示

   ​​ <input id="x" value="x" />
    <input id="y" value="y" style="visibility:hidden" />
    <input type="button" onclick="toggleBoth()" value="arrow" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.

function toggle(id){

  var elem = document.getElementById(id);

    if(elem.style.visibility == 'hidden')
        elem.style.visibility = 'visible';
    else
      elem.style.visibility = 'hidden';  
}

 function toggleBoth()
    {
       toggle('x');
       toggle('y');
    }
​