0

以下のコードは、クリックすると最初に非表示の div を開いたり閉じたりするリンクです。最初のインスタンスでリンクを 2 回クリックして開く以外は問題なく動作します。大きな問題ではありませんが、最初のクリックで div が開くようにできれば素晴らしいと思います。

toggleDiv.js

function toggleDiv(elem, eventType, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(eventType, handler, false);
    } else {
        elem.attachEvent('on' + eventType, handler);
    }
}

toggleDiv(window, 'load', function() {
    var link = document.getElementById('myMagicLink'),
        div = document.getElementById('foo');
    toggleDiv(link, 'click', function() {
        if (!link) return true;
        if (div.style.display == "none") {
            div.style.display = "block"
        } else {
            div.style.display = "none"
        }
        return true;
    });
});

index.html

<body>
<a id="myMagicLink" href="http://www.google.com/">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
<script language="JavaScript" type="text/javascript" src="toggleDiv.js"></script>
</body>
4

3 に答える 3

1

ASIDE タグの表示値を切り替えるのと同じ問題がありました。"none" から "inline" に切り替えてから元に戻すと、最初のクリックでは機能しませんでした。CSSファイルで表示が「なし」に設定されていました。私のスクリプトでは、「none」を「」に変更しました（私が理解している限り、これは「デフォルト」を意味するようです）。次のコードは今私にとってはうまくいきます。

    var x = document.getElementsByTagName("aside")[0];
if (x.style.display == "")
{
    x.style.display = "inline"; 
}
else
{
    x.style.display = "";   
}

これは、Firefox 開発者ツールで CSS/実際の値を見たときにわかりました。"aside" は CSS 属性で表示されますが、"element" は属性なしで最初に表示されます。最初のクリックで、「要素」には「なし」に設定された「表示」属性が割り当てられました。

于 2015-12-20T12:32:20.060 に答える
0

これが何の問題なのかわかりません...これはChromeで問題なく動作します。

リンクの URL を同じドキュメントに反映するように変更しましたが、divfooは非表示になっていて、必要に応じて再表示されています。

いくつかのスタイル ノート: 設定するよりも、既定値に戻せるdisplay = "block"と言ったほうがよいでしょう。display = ""

さらに、preventDefault 関数も含めました。の使用はDOM0 スタイルのイベント処理では機能しますが、コードreturn trueでは機能しませんでした。attachEvent/addEventHandlerこれにより、リンクがたどられなくなります。

<html>
<head>
<title>Test</title>
<script>
function toggleDiv(elem, eventType, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(eventType, handler, false);
    } else {
        elem.attachEvent('on' + eventType, handler);
    }
}


toggleDiv(window, 'load', function() {
    var link = document.getElementById('myMagicLink'),
        div = document.getElementById('foo');
    toggleDiv(link, 'click', function(e) {
        if (!link) return cancelDefaultAction(e);

        if (div.style.display == "none") {
            div.style.display = "block"
        } else {
            div.style.display = "none"
        }       
        return cancelDefaultAction(e);
    });
});

function cancelDefaultAction(e) {
 var evt = e ? e:window.event;
 if (evt.preventDefault) evt.preventDefault();
 evt.returnValue = false;
 return false;
}   

</script>


<body>
<a id="myMagicLink" href="#">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>

</body>
</html>
于 2012-09-05T05:44:42.573 に答える
0

申し訳ありませんが、特定の設計を念頭に置いていない限り、非常に単純なもののように少し複雑に思えます。しかし、これは同様にうまくいくはずです:

フィドル

<html>
<head>
    <script language="JavaScript" type="text/javascript">

    var toggled = false;
    function toggleDiv()
        {
           if(toggled)
             {
               document.getElementById('foo').style.display = '';
               toggled = false;            
             }       
           else
           {
               document.getElementById('foo').style.display = 'none';
               toggled = true;
           }
        }
    </script>
    </head>
<body>
<a id="myMagicLink" href="http://www.google.com/" onClick='toggleDiv()'>My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
</body>
</html>

</p>

于 2012-09-05T05:59:39.517 に答える