Question

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

例如，我有

<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

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;

    };
};

DEMO

Answer 3

DEMO

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

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

3 个答案: