jQuery菜单关闭后窗口Resize重复弹出问题求助

我正在开发一个使用jQuery实现的响应式菜单，设置了两个分别适配小屏和大屏的菜单，通过CSS和jQuery根据屏幕尺寸切换显示，窗口Resize时菜单切换正常。但存在一处问题：小屏模式下点击菜单按钮可显示overlay菜单，点击关闭按钮能隐藏它，但关闭后再次Resize窗口，overlay会重新弹出。关闭操作仅临时隐藏菜单，菜单逻辑仍在运行，希望点击关闭后，Resize窗口时不再触发菜单显示，效果类似无刷新重置页面，推测需将关闭功能整合到现有菜单代码中实现切换逻辑，但不知如何调整。

现有代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay">
  <div class="close">
    <a href="javascript:onclick=close()"><i class="fa-solid fa-xmark"></i></a>
  </div>
  <ul>
    <li>
      <a href="index.php"><img src="images/logo.png" /></a>
    </li>
    <li><a href="home.php">Home</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>
</div>

<div id="nav">
  <ul>
    <li class="current_page_item"><a href="javascript:onclick=menu()"><i class="fa-solid fa-bars"></i> Menu</a></li>
    <li><a href="home.php">Home</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>
</div>

CSS #

/* Reset */

html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

img {
  height: auto;
  max-width: 100%;
}


/* Overlay */

.overlay {
  background: rgba(99, 31, 43, 0.95);
  bottom: 0;
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  left: 0;
  opacity: 0;
  padding-top: 69px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  transition: opacity 0.2s, visibility 0.2s;
  visibility: hidden;
  z-index: 99999991;
}

.overlay .close {
  position: absolute;
  right: 0;
  top: 20px;
}

.overlay i {
  font-size: 25px;
}

.overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.overlay>ul>li:not(:first-of-type) {
  padding: 20px 0;
}

.overlay ul li.current_page_item a {
  border-bottom: 2px solid #fff;
  color: #fff;
  font-size: 18px;
}

.overlay a {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 15px 10px 20px;
  padding: 5px 10px 5px;
  text-decoration: none;
  text-transform: uppercase;
}

.overlay img {
  height: auto;
  margin: 10px 0 50px;
  position: relative;
  width: 75px;
  z-index: 1;
}

@media screen and (max-width: 799px) {
  .open {
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (min-width: 800px) {
  .open {
    display: none;
  }
}


/* Nav */

#nav {
  font-family: 'Montserrat', sans-serif;
}

#nav ul {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

@media screen and (max-width: 799px) {
  #nav>ul>li:not(:first-of-type) {
    display: none;
  }
  #nav>ul>li:first-of-type i {
    margin-right: 10px;
    position: relative;
    top: 2px;
  }
}

@media screen and (min-width: 800px) {
  #nav>ul>li:first-of-type {
    display: none;
  }
}

#nav li.current_page_item a {
  border-bottom: 2px solid #631f2b;
  color: #631f2b;
  font-size: 18px;
}

#nav a {
  color: #a7a6a6;
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  margin: 15px 10px 20px;
  padding: 5px 10px 5px;
  text-decoration: none;
  text-transform: uppercase;
}

JavaScript #

function menu() {
  var $window = $(window),
    $html = $('html');
  $window.resize(function resize() {
    if ($window.width() < 800) {
      $('.overlay').addClass('open');
      document.body.style.overflow = 'hidden';
      window.scrollTo(0, 0);
    } else {
      $('.overlay').removeClass('open');
      document.body.style.overflow = 'visible';
    }
  }).trigger('resize');
}

function close() {
  $('.overlay').removeClass('open');
  document.body.style.overflow = 'visible';
}

修复方案 #

核心思路 #

添加一个全局状态变量isMenuClosed，记录用户是否主动关闭了菜单。在Resize事件中，只有当屏幕宽度小于800px且用户没有主动关闭菜单时，才显示overlay。

修改后的JavaScript代码 #

// 全局状态变量：标记用户是否主动关闭了菜单
let isMenuClosed = false;

function menu() {
  // 用户点击菜单按钮时，重置关闭状态
  isMenuClosed = false;
  var $window = $(window),
      $html = $('html');
  
  // 先解绑之前的Resize事件，避免多次点击菜单按钮导致事件堆积
  $window.off('resize').resize(function resize() {
    if ($window.width() < 800 && !isMenuClosed) {
      $('.overlay').addClass('open');
      document.body.style.overflow = 'hidden';
      window.scrollTo(0, 0);
    } else {
      $('.overlay').removeClass('open');
      document.body.style.overflow = 'visible';
    }
  }).trigger('resize');
}

function close() {
  $('.overlay').removeClass('open');
  document.body.style.overflow = 'visible';
  // 用户主动关闭菜单时，标记状态
  isMenuClosed = true;
}

额外优化建议 #

1. 优化HTML点击事件写法：替换内联脚本为更标准的写法，避免潜在问题

<!-- 关闭按钮 -->
<div class="close">
  <a href="javascript:void(0);" onclick="close()"><i class="fa-solid fa-xmark"></i></a>
</div>

<!-- 菜单按钮 -->
<li class="current_page_item"><a href="javascript:void(0);" onclick="menu()"><i class="fa-solid fa-bars"></i> Menu</a></li>

2. 使用jQuery绑定事件（推荐）：完全移除内联脚本，使代码结构更清晰

$(document).ready(function() {
  // 绑定关闭按钮点击事件
  $('.close a').on('click', function(e) {
    e.preventDefault();
    close();
  });
  
  // 绑定菜单按钮点击事件
  $('#nav .current_page_item a').on('click', function(e) {
    e.preventDefault();
    menu();
  });
});

对应的HTML去掉内联事件：

<div class="close">
  <a href="#"><i class="fa-solid fa-xmark"></i></a>
</div>

...

<li class="current_page_item"><a href="#"><i class="fa-solid fa-bars"></i> Menu</a></li>

内容的提问来源于stack exchange，提问作者joshmrodg