我有一个响应式面板,它会根据网络浏览器的宽度而变化。根据列表项的数量,我希望显示一个 block 。例如,如果有两个列表项,我希望 block 以 500 像素的窗口宽度显示。
我的问题是:执行此操作的最佳和最优化方法是什么?
获取 ul 中列表项数量的当前代码:
document.querySelectorAll("#ulClass li").length
我目前的想法是在窗口调整大小事件上使用开关:
window.addEventListener('resize', function(event){
// do stuff here
});
注意:
- 我需要使用纯 JavaScript,没有插件等。
- 我不会使用 Resize Observer。
最佳答案
如果需要使用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;
}
关于javascript - 显示 : block; based on number of list items in ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58931431/