隐藏10000个下拉菜单的最佳方法 [英] Best way to hide 10000 dropdown menus

问题描述

上下文-

我有一个聊天组件，每条聊天消息都有一个下拉列表.

I have a chat component and each individual chat message has a dropdown.

然后通过单击更多选项图标"(3个点)打开下拉菜单.

And the dropdown menu is opened by clicking the "More Options icon"(3 dots).

每条聊天消息都是骨干项目视图"

一种解决方案是侦听单击"body"，循环浏览所有菜单，然后通过删除其上的类来关闭下拉菜单.

One solution is to listen to click on "body", loop through all the menus and then close the dropdown by removing a class on it.

$("body").on("click", function() {
  $(".drop-down-menu").each(function(idx, item) {
      $(item).removeClass("open"); // open class indicated it is open via CSS
  });
});

CSS-

.drop-down-menu {
    visibility: hidden;
    opacity: 0;
    &.open {
       opacity: 1;
       visibility: visible;
    }
}

如果有10,000条或更多消息，会对性能产生影响吗?

Will there be any performance impact if there are 10,000 messages or more?

因此，我正在寻找最好的解决方案，以在用户单击屏幕上的任何位置时隐藏下拉菜单. 谢谢.

Hence, I am looking for the best solution to hide the drop down if user clicks anywhere on the screen. Thanks.

推荐答案

您可以进行一些琐碎的更改，这些更改应该可以提高代码的性能.第一件事是没有理由像您那样循环播放. jQuery对象是集合，并且jQuery操作通常遍历jQuery对象的元素.所以:

You can make some trivial changes that should improve the performance of your code. The first thing is that there's no reason to loop like you are doing. jQuery objects are collections and jQuery operations usually loop over the elements of a jQuery object. So:

$("body").on("click", function() {
  $(".drop-down-menu").removeClass("open");
});

这将从选择器".drop-down-menu"匹配的所有元素中自动删除类open. jQuery仍将在内部进行循环，但是让jQuery自己进行迭代比让.each调用您自己的回调然后在回调内部创建要在其上调用.removeClass的新jQuery对象要快得多.

This will automatically remove the class open from all elements matched by the selector ".drop-down-menu". jQuery will still go over a loop internally, but it is faster to let jQuery iterate by itself than to have .each call your own callback and then inside the callback create a new jQuery object on which to call .removeClass.

此外，您从逻辑上知道，从不具有此类的元素中删除open类是没有意义的.因此，您可以将操作范围缩小到仅删除open有意义的那些元素:

Furthermore, you logically know that removing the open class from elements that do not have this class is pointless. So you can narrow the operation to only those elements where removing open makes sense:

$("body").on("click", function() {
  $(".drop-down-menu.open").removeClass("open");
});

这些是广泛适用的原则，实现起来成本不高.除此之外，任何其他事情都可能会进入优化领域，并可能会带来不利影响，并且应该通过对代码进行实际性能分析来予以支持.您可以将jQuery代码替换为仅使用原始DOM调用的代码，但是如果您需要对旧浏览器的支持，那么处理此错误和该奇怪操作的成本可能不值得.而且，如果您使用的是普通的DOM方法，那么有多种方法可能会导致不同的性能提升，但代价​​是代码复杂性.

These are principles that are widely applicable and that have trivial cost to implement. Anything more than this runs into the realm of optimizations that may have downsides, and should be supported by actually profiling your code. You could replace the jQuery code with code that only uses stock DOM calls but then if you need support for old browsers the cost of dealing with this and that quirk may not be worth it. And if you are using stock DOM methods, there are different approaches that may yield different performance increases, at the cost of code complexity.

这篇关于隐藏10000个下拉菜单的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！