toggling divのエラーを修正するには？私はこのコードで私をクリックしてdivの依存を表示/非表示しています

Question

：

$("body").click(function(e) { 
    if(e.target.id == ".userNavBar") { 
     $(".dropdownInfo").css({ 'display' : 'block'}); 
     $('.userNavBar').css({'background-color' : '#444'}); 
     $('.upperBar').css({'border-top-color' : '#ff556f'}); 
    } else { 
     $(".dropdownInfo").css({ 'display' : 'none'}); 
     $('.userNavBar').css({'background-color' : '#333'}); 
     $('.upperBar').css({'border-top-color' : '#333'}); 
    } 
}); 

私は.userNavBarをクリックすると、何も起こらない、と私はエラーと警告のための要素を検査する場合、これらのエラーの4のためのポップアップ表示します各クリック： "event.layerXとevent.layerYは壊れており、WebKitでは廃止予定です。近いうちにエンジンから削除されます。"

どうすればこの問題を解決できますか？そして何が問題なの？

Answer 1

ではありません私はこの問題は、あなたがIDやクラスを混乱しているということだと思います。

しかし、私はあなたが正しくやろうとしているものを読んでいるならば、あなたはこのような何かを持つ方が良いかもしれません：

$(function() { 
    function toggleMenu(show) { 
    $(".dropdownInfo").toggle(show); 
    $('.userNavBar').css('background-color', show ? '#444' : '#333'); 
    $('.upperBar').css('border-top-color', show ? '#ff556f' : '#333'); 
    }; 
    $('.userNavBar').click(function(e) { 
    toggleMenu(true); 
    e.stopPropagation(); 
    }); 
    $("body").click(function(e) { 
    toggleMenu(false); 
    }); 
}); 

Answer 2

はこれを試してみてくださいしかし、文書オフ全身にクリックイベントに登録すると、偉大な練習

$("body").click(function(e) { 
    if($(this).class() == ".userNavBar") { 
     $(".dropdownInfo").css({ 'display' : 'block'}); 
     $('.userNavBar').css({'background-color' : '#444'}); 
     $('.upperBar').css({'border-top-color' : '#ff556f'}); 
    } else { 
     $(".dropdownInfo").css({ 'display' : 'none'}); 
     $('.userNavBar').css({'background-color' : '#333'}); 
     $('.upperBar').css({'border-top-color' : '#333'}); 
    } 
});