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

尝试这一点，但注册文档上的整个单击事件并不是很好的做法

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

Answer 2

我认为问题在于你混淆了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);
  });
});

如何修复切换div的错误？

2 个答案: