【8】根据浏览器宽度自动折叠菜单的修改

桂花酒酿丸子 的 根据浏览器宽度自动折叠菜单 的贴子看了，很受启发，工程文件下载了，但是没有能成功复现，仔细研究了一下原工程文件，做了几处修改，与格友们分享一下，大家共同研究，还望批评指正。

1.我之所以不能复现，是因为原工程文件中，在页面中嵌入了一个 JS 程序，其源代码如下：

1. var func = debounce(layout, 1000);
   
2. function debounce(fn, delay) {
   
3.    var timerId;
   
4.    return function() {
   
5.       clearTimeout(timerId);
   
6.       timerId = setTimeout(fn, delay);
   
7.    };
   
8. };
   
9. function layout(){
   
10.    var width = Forguncy.Page.getCell("ViewWidth").getValue();
    
11.    if(width <= 900){
    
12.    Forguncy.Page.getCell("NewViewWidth").setValue(width);
    
13.    }
    
14. };
    
15. 
    
16. window.onresize = func;

复制代码

但是其实不用调用浏览器窗口对象的 onresize ，就直接用文本框触发就行，所以，我删掉了这个 JS 文件，这是第一个改动。

2. 原工程文件可以实现宽度缩小后折叠，但是不能实现宽度增大后还原，把这个逻辑补全了

3. 原工程文件宽度触发阈值写在了命令里，我把它移出来了，放到了一个单元格中了，以后只要修改这个单元格的值就可以了，当需要调整触发阈值时，不用再改命令了

4. 原工程文件中命令有一个隐藏了BCDE列，我一开始不明白是为什么，后来知道了，我的习惯是菜单独占一列，宽度为 256，当菜单折叠时，折叠后的菜单宽度是64，剩余了192，就会显示为空白，后续的列不会自动补上这个空白。我把菜单列分为了两列，一列是64，一列是192，当折叠菜单时，把B列隐藏，后面的内容就跟过来了，当菜单还原时，再把隐藏的列显示出来了

桂花酒酿丸子 的原作才是精彩，我这最多算是个狗尾续貂，如有错误，还请批评指正。

工程文件附上：

[前端与美化]_[格友杂谈]_自动缩放菜单demo_修复_20220802_Swejet.fgcc (941.42 KB, 下载次数: 396)

2022-8-2 11:23 上传

点击文件名下载附件

66

顶顶顶

学习学习

感谢大佬优化，JS文件不建议删除。其实我最初也是直接将“浏览器宽度”直接设置到输入框触发器里。
但是每次调整大小都会出现大量的触发命令（我不知道这样是否会影响性能，但是个人感觉频繁触发总是不大好）。于是才设置了一个JS给宽度调整命令设置了一个1000毫秒的延时，当1000毫秒内，宽度不再变化，才正式执行，如果1000毫秒内又出现了变化，则重新开始1000毫秒的计时。
抛砖引玉出了好思路，是件让人开心的事情。

感谢分享

简单直接 学习了。