0

私はjQueryを学び始めたばかりで、基本的に「要素の外側をクリック」イベントを再現したいと考えています。同様の質問がここで尋ねられました：

要素の外側のクリックを検出するにはどうすればよいですか?

ただし、これは複数の要素では機能しません。ページに複数のドロップダウン ボックスを配置したいのですが、一度に表示できるのは 1 つだけです。ユーザーがボックスの外側または同じドロップダウン リンクをクリックした場合、開いたボックスを閉じる必要があります (ユーザーが別のドロップダウン リンクをクリックした場合は、新しいボックスを開く必要があります)。私はここに私のコードを持っています:

http://jsfiddle.net/JvCUd/2/

現在開いているボックスの jQuery 指定子 (または ID) をグローバル変数に格納しようとしています。

jsOpenedWnd = "";
$(document).ready(function()  {
...
});

私が使いたい機能はこれです：

$.fn.toggleWnd = function() {       
    if ( jsOpenedWnd != this ) {
        $(this).toggle();
        $(jsOpenedWnd).toggle();
        jsOpenedWnd = this;
    }
    else {   
        $(this).toggle();
        jsOpenedWnd = "";
    }
}

しかし、それは正しく機能していません。これがこの問題の間違った解決策である可能性があることは承知していますが、学習目的のためだけに、これを機能させる方法を知りたいと思います。

編集：最終的に解決しました。答えは、私がリンクした質問にずっとあったことがわかりました。私は使用しなければなりませんでした event.stopPropagation();

更新されたコードは次のとおりです (一度にアクティブになるウィンドウは 1 つだけです): http://jsfiddle.net/HwE2N/

4

1 に答える 1

1

.is()thisは jQuery ラッパーでjsOpenedWndセレクターであるため、それらを使用してチェックできます。

$.fn.toggleWnd = function() {       
    if ( !this.is(jsOpenedWnd)) {
        $(this).toggle();
        $(jsOpenedWnd).toggle();
        jsOpenedWnd = this;
    }
    else {   
        $(this).toggle();
        jsOpenedWnd = "";
    }
}

デモ:フィドル

于 2013-08-26T16:52:15.300 に答える