Как исправить ошибку при переключении div?

Question

Я показываю / скрываю div в зависимости от того, где я нажимаю с этим кодом:

$("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

Мне кажется, проблема в том, что вы путаете идентификаторы и классы.

Но если я читаю то, что вы пытаетесь сделать правильно, вам может быть лучше что-то вроде этого:

$(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'});
    }
});