0

私のサイトには、オンクリックしたい矢印があります。ある要素を非表示にし、別の要素を表示します。もう一度押すと、表示されていた要素が非表示になり、非表示になっていた要素が表示されます。

たとえば、私は

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

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

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

最初は広告が表示されていますが、矢印をクリックすると広告が非表示になり、説明とナビゲーションが表示されます。

4

3 に答える 3

4

jQuery では、次を使用します.toggle()。

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

デモ。

displayプレーンな JavaScript では、各要素のプロパティを手動で切り替える必要があります。

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

デモ。

于 2012-09-09T21:39:48.723 に答える
1

これを試してください（プレーンな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>

于 2012-09-09T21:47:42.360 に答える
0

デモ

   ​​ <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');
    }
​
于 2012-09-09T21:55:22.890 に答える