窗口调整时防止导航菜单展开的JS优化技巧

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《窗口重置时防止导航子菜单展开的JS优化方法》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

本文探讨了在使用JavaScript处理响应式导航菜单时，如何避免在窗口大小调整（特别是从桌面视图切换到移动视图）时子菜单意外自动展开的问题。通过引入一个状态跟踪的占位符CSS类，并优化`matchMedia`事件监听器的结构，可以有效地管理菜单的显示状态，确保用户体验的连贯性，避免不必要的菜单行为。

在现代响应式网页设计中，导航菜单的行为管理是一个常见的挑战。当用户调整浏览器窗口大小，特别是从大屏幕切换到小屏幕（如手机视图）时，开发者常常会遇到一个问题：在用户未点击汉堡菜单图标的情况下，子菜单或整个移动导航栏可能会意外自动展开。这不仅破坏了用户体验，也反映了状态管理上的不足。本文将详细介绍如何通过JavaScript优化，尤其是引入一个简单的占位符CSS类，来解决这一问题。

问题分析：响应式导航菜单的意外展开

原始代码片段试图通过window.matchMedia来响应屏幕宽度的变化。当屏幕宽度大于等于1080px时，如果汉堡菜单和导航栏处于激活状态（即在移动视图下被打开），则会移除这些激活类，使导航栏恢复到初始状态。然而，在缩小屏幕宽度时，原有的逻辑可能会在未点击汉堡菜单的情况下重新添加激活类，导致导航栏自动展开。

原始代码存在以下潜在问题：

1. 嵌套的事件监听器： 在widthMatch的change事件内部又添加了widthMatch2的change事件监听器。这会导致每次widthMatch匹配时，都会重新绑定一个widthMatch2的监听器，造成性能问题和逻辑混乱。
2. 状态管理缺失： 代码没有明确记录导航栏是否是因为从大屏幕切换到小屏幕而“被关闭”的。它只是简单地在满足条件时移除或添加类，没有区分是用户主动操作还是系统尺寸变化导致的。

// 原始代码片段 (存在问题)
let widthMatch = window.matchMedia("(min-width: 1080px)");
let widthMatch2 = window.matchMedia("(max-width: 1080px)");

widthMatch.addEventListener('change', function(mm) {
  if (mm.matches) {
    if (burgerDivEle.classList.contains('on') && navUlEle.classList.contains('nav-active')) {
      nav.classList.remove("nav-active");
      burger.classList.remove('on');
    } else if (!burgerDivEle.classList.contains('on') && !navUlEle.classList.contains('nav-active')) {
      // 这里的逻辑存在问题，且嵌套了事件监听器
      widthMatch2.addEventListener('change', function(mm) {
        if (mm.matches) {
          nav.classList.add("nav-active");
          burger.classList.add('on');
        }
      });
    }
  }
});

解决方案：引入占位符类进行状态跟踪

解决此问题的核心思想是引入一个“占位符”CSS类（例如been-removed），用于标记导航菜单是否因为屏幕尺寸变大而被系统性地关闭。这样，当屏幕尺寸再次变小并满足移动视图的条件时，我们就可以根据这个占位符类来判断是否需要自动重新激活导航菜单。

同时，我们需要将两个matchMedia的事件监听器分离，避免嵌套，使逻辑更加清晰和独立。

步骤一：处理从移动视图切换到桌面视图的逻辑

当屏幕宽度从小于1080px变为大于等于1080px时，如果导航菜单处于打开状态，我们应该将其关闭，并添加been-removed占位符类。这表示导航菜单是由于屏幕尺寸变大而被“强制”关闭的。

// 优化后的代码片段 - 处理屏幕变大
widthMatch.addEventListener('change', function(mm) {
  if (mm.matches) { // 当屏幕宽度 >= 1080px
    // 如果导航菜单当前处于打开状态
    if (burgerDivEle.classList.contains('on') && navUlEle.classList.contains('nav-active')) {
      // 移除激活类，将导航菜单恢复到初始状态
      nav.classList.remove("nav-active");
      burger.classList.remove('on');
      // 添加占位符类，标记导航菜单是因为尺寸变化而被关闭的
      nav.classList.add('been-removed');
      burger.classList.add('been-removed');
    }
  }
});

步骤二：处理从桌面视图切换到移动视图的逻辑

当屏幕宽度从大于等于1080px变为小于1080px时，我们需要检查之前是否添加了been-removed占位符类。只有当这个类存在时（表示导航菜单之前是因为尺寸变大而被关闭的），我们才应该重新激活导航菜单。完成激活后，立即移除been-removed类，以避免后续不必要的行为。

// 优化后的代码片段 - 处理屏幕变小
widthMatch2.addEventListener('change', function(mm) {
  if (mm.matches) { // 当屏幕宽度 <= 1080px
    // 检查是否存在占位符类，判断导航菜单是否之前被系统性关闭
    if (burgerDivEle.classList.contains('been-removed') && navUlEle.classList.contains('been-removed')) {
      // 重新添加激活类，使导航菜单在移动视图下展开
      nav.classList.add("nav-active");
      burger.classList.add('on');
      // 移除占位符类，重置状态
      nav.classList.remove("been-removed");
      burger.classList.remove('been-removed');
    }
  }
});

完整优化代码示例

结合上述两个步骤，完整的优化代码如下所示：

// 假设 burgerDivEle, navUlEle, nav, burger 等DOM元素已正确获取
let widthMatch = window.matchMedia("(min-width: 1080px)");
let widthMatch2 = window.matchMedia("(max-width: 1080px)");

// 监听屏幕宽度变大（从移动视图切换到桌面视图）
widthMatch.addEventListener('change', function(mm) {
  if (mm.matches) {
    // 如果导航菜单当前是打开的（在移动视图下）
    if (burgerDivEle.classList.contains('on') && navUlEle.classList.contains('nav-active')) {
      // 移除激活类，将导航菜单恢复到初始状态
      nav.classList.remove("nav-active");
      burger.classList.remove('on');
      // 添加占位符类，标记导航菜单是因为尺寸变化而被关闭的
      nav.classList.add('been-removed');
      burger.classList.add('been-removed');
    }
  }
});

// 监听屏幕宽度变小（从桌面视图切换到移动视图）
widthMatch2.addEventListener('change', function(mm) {
  if (mm.matches) {
    // 只有当导航菜单之前是因为尺寸变大而被关闭时，才重新激活
    if (burgerDivEle.classList.contains('been-removed') && navUlEle.classList.contains('been-removed')) {
      // 重新添加激活类，使导航菜单在移动视图下展开
      nav.classList.add("nav-active");
      burger.classList.add('on');
      // 移除占位符类，重置状态，以便下次操作
      nav.classList.remove("been-removed");
      burger.classList.remove('been-removed');
    }
  }
});

// 确保在页面加载时，根据当前屏幕尺寸初始化状态
// 这部分代码需要根据实际情况添加，例如：
// if (widthMatch.matches) { /* 桌面视图初始状态 */ }
// else { /* 移动视图初始状态 */ }

注意事项与最佳实践

1. 占位符类的命名： been-removed只是一个示例，您可以根据项目约定选择更具描述性的类名，例如was-active-on-mobile或system-closed。
2. CSS样式的配合： been-removed类本身不需要任何CSS样式，它仅用于JavaScript中的逻辑判断。
3. 避免嵌套事件监听器： 原始代码中嵌套widthMatch2监听器是一个常见错误。matchMedia的change事件应该独立监听，各自处理其匹配条件下的逻辑。
4. 初始状态处理： 在页面加载时，也应该根据当前的屏幕尺寸来初始化导航菜单的状态，确保首次加载时也是正确的。
5. 用户交互优先： 确保用户通过点击汉堡菜单图标打开或关闭导航菜单的逻辑不受这些尺寸变化逻辑的影响。通常，用户点击事件会直接添加或移除on和nav-active类，而不会涉及been-removed类。
6. 性能考量： matchMedia的change事件只在媒体查询匹配状态改变时触发，相比于window.resize事件，它具有更好的性能，因为它不会在每次像素变化时都触发。

总结

通过引入一个简单的占位符CSS类并优化matchMedia事件监听器的结构，我们能够有效地区分导航菜单是因用户操作而打开/关闭，还是因屏幕尺寸变化而被系统性地调整。这种状态管理方法确保了在响应式设计中，导航菜单的行为更加可预测和一致，从而显著提升了用户体验，避免了子菜单在不经意间自动展开的问题。这是一个简单而强大的JavaScript技巧，适用于任何需要精细控制响应式UI组件状态的场景。

以上就是《窗口调整时防止导航菜单展开的JS优化技巧》的详细内容，更多关于的资料请关注golang学习网公众号！