单击打开和关闭时切换下拉 div 的更好方法？

发布于 2024-12-23 02:54:51 字数 489 浏览 4 评论 0原文

我目前正在使用以下代码切换下拉 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？这看起来是一个非常大的代码块..

原文

I'm currently toggling a dropdown div menu with the following code:

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

Is there a faster/better/more efficient way to toggle the div? This seems like a very large chunk of code..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

明媚如初 2024-12-30 02:54:51

在样式表中使用更多 CSS，并减少内联 CSS。然后你就可以切换一个班级，并站在周围看起来...优雅。另一件事：您可以仅绑定一个 click 事件侦听器，并在事件处理程序中检查是否应该打开或关闭菜单。

CSS

.userNavBar {
    background-color: #333;
}

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

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

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

JavaScript

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

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

Use more CSS in a stylesheet, and less inline. Then you can just toggle a class, and stand around looking ...classy. One other thing: you can bind just a single click event listener, and in the event handler, check to see whether or not you should open or close the menu.

CSS

.userNavBar {
    background-color: #333;
}

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

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

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

JavaScript

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

Also, please don't mix single- and double-quotes. Pick one, and be consistent.

回复收藏 0 原文