Jquery 更好的方式切换下拉div点击和关闭？

我目前正在使用以下代码切换下拉div菜单：

$(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？这似乎是一个非常大的代码块。

您可以尝试使用持续时间切换

在样式表中使用更多CSS，减少内联。然后你可以切换一个类，站在那里看起来…优雅。还有一件事：您可以只绑定一个

单击

事件侦听器，然后在事件处理程序中检查是否应打开或关闭菜单

CSS JavaScript

---

此外，请不要混合单引号和双引号。选择一个，并保持一致。

是的，我知道，但更具体地说，如果您在.userNavBar？thnx之外单击以获取更多css的答案，是否有更好的方法进行测试

.userNavBar {
    background-color: #333;
}

.userNavBar.active {
    background-color: #444;
}

.upperBar {
    border-top-color: #333;
}

.upperBar.active {
    border-top-color: #ff556f;
}

$(function() {
  function toggleMenu(show) {
    $('.dropdownInfo').toggle(show);
    $('.userNavBar, .upperBar').toggleClass('active', show);
  };

  $('body').on('click', function(e) {
    var show = $(e.target).hasClass('userNavBar');
    if (show) e.preventDefault(); // not sure this is even necessary anymore
    toggleMenu(show);
  });
});