javascript - 显示 : block; based on number of list items in ul

Question

我有一个响应式面板，它会根据网络浏览器的宽度而变化。根据列表项的数量，我希望显示一个 block 。例如，如果有两个列表项，我希望 block 以 500 像素的窗口宽度显示。

我的问题是:执行此操作的最佳和最优化方法是什么？

获取 ul 中列表项数量的当前代码:

document.querySelectorAll("#ulClass li").length

我目前的想法是在窗口调整大小事件上使用开关:

window.addEventListener('resize', function(event){
  // do stuff here
});

注意:

1. 我需要使用纯 JavaScript，没有插件等。
2. 我不会使用 Resize Observer。

Answer 1

如果需要使用JS:1) 制作一个事件监听器，它会在您每次调整浏览器大小时使用react，例如:

window.addEventListener('resize', function(event){

});

2) 创建一个每次用户调整窗口大小时都会触发的函数

function handleResize(){

}

3) 像这样在您的 eventListener 中调用该函数:

 window.addEventListener('resize', function(event){
      handleResize();
    });

4) 创建一个变量来存储您的列表项列表，例如:

  const items = document.querySelectorAll(".some-list");

5) 获取屏幕的宽度-> https://www.w3schools.com/js/js_window_screen.asp

5) 在你的 handleResize 函数中 - 检查屏幕的宽度并基于它 + 基于元素的数量 - 添加一个特定的 css 类，如

.visible {
dsiplay:block;
}