jQuery：slideToggleの可視性が機能していないことを確認していますか？

Question

私はフォームのサインインを表示するためにスライドトグルを使用しようとしています。ボックスの外側をクリックすると、そのフォームをスライドさせたいと思います。

私はすべて正常に動作していますが、可視性のチェックが機能していないため、フォームコンテナの外をクリックすると機能しません。あなたはなぜそれを見つけることができますか？

var loginForm = jQuery("#login .login-form"); 
jQuery("#login a").click(function(e) { 
    e.preventDefault(); 
    loginForm.slideToggle(); 

}); 

// below check isn't working why? 
if (jQuery(loginForm).is(":visible")) { 
    jQuery("body").click(function() { 
     jQuery(loginForm).slideUp(); 
    }); 
} 

Answer 1

あなたはクリックハンドラ内のチェックが必要です。

jQuery("body").click(function() { 
    if (loginForm.is(":visible")) { 
     loginForm.slideUp(); 
    } 
}); 

追加のノートを、あなたはすでにjQueryオブジェクトであるオブジェクトに対してjQueryを呼び出す必要はありません。 loginFormをダブルラップする必要はありません。

ログインクリックハンドラーでもevent.stopPropagation()にするといいでしょう。それ以外の場合は、それをクリックすると本体にバブルしてそのハンドラーも起動します。

Answer 2

このコードはどこから実行されますか？ clickハンドラをバインドするときにdocumentが準備完了していますか？

また、loginForm変数はすでに、jQueryで再びそれを行うには必要はラップされていない：

// Make sure the document is ready for manipulating the DOM: 
jQuery(function ($) { 
    var loginForm = $('#login .login-form'); 

    $('#login a').click(function (e) { 
     e.preventDefault(); 
     loginForm.slideToggle();  
    }); 

    if (loginForm.is(':visible')) { 
     $(document).click(function() { 
      loginForm.slideUp(); 
     }); 
    } 
});