0

デモ： http： //jsfiddle.net/nazym/1/
ボタンが押されたときにポップアップを表示し、他の場所で押されたときに非表示にするコード。ボタンを2回クリックすると、エラーが発生します。
したがって、ボタンが繰り返しクリックされたときにポップアップを表示/非表示にするコードが機能するはずです。

4

2 に答える 2

5

ボタンをクリックすると、非表示の場合はポップアップが表示され、表示されている場合は非表示になるようにしたい場合 (他の場所をクリックすると非表示になる)、問題を引き起こしているのはコードの次のブロックです。

if (ele == element) {
    hideDropDown();
    return;
}

hideDropDown 関数に引数を渡していません。そのはず：

hideDropDown(ele);

そうすれば、onclick ハンドラーが要素に適切に追加されます。

于 2012-08-26T07:27:38.607 に答える
1

これは、この機能を実装する非常に複雑な方法のようです。次のように、はるかに少ないコードでそれを行うことができます。

document.onclick = function(e) {
    if (!e) e = window.event;
    var target = e.target || e.srcElement;
    document.getElementById("window").style.display = 
        document.getElementById("but") === target ? "inline-block" : "none";
};

つまり、ドキュメントをクリックすると、ターゲット/ソース要素がボタンであるかどうかを確認します。そうであればポップアップを表示し、そうでなければ非表示にします。

デモ: http://jsfiddle.net/nazym/12/

または、ボタンへのクリックを繰り返してポップアップの表示を切り替えたが、他の場所をクリックして非表示にしたい場合は、条件をわずかに変更するだけです。

document.getElementById("window").style.display = 
    document.getElementById("but") === target &&
    document.getElementById("window").style.display === "none" ? "inline-block" : "none";

デモ: http://jsfiddle.net/nazym/13/

編集: ポップアップをクリックしても非表示にできないというコメントに対応するには、上記の後に次のコードを追加できます。

document.getElementById("window").onclick = function(e) {
    if (!e) e = window.event;
    if (e.stopPropagation) 
        e.stopPropagation(); // W3C model
    else 
        e.cancelBubble = true; // IE model
};
​

つまり、ポップアップ内のクリックがバブルアップしないようにして、表示と非表示を行うドキュメント レベルのクリック ハンドラーに到達しないようにします。

デモ: http://jsfiddle.net/nazym/16/

于 2012-08-26T07:34:17.133 に答える