javascript - 响应式菜单在窗口大小调整时消失

Question

我对脚本有点新手，但一直在尝试找到适合我的响应式菜单解决方案的解决方案。我见过其他人也有类似的问题，但他们的菜单似乎使用了不同的方法。

这是我的代码:

HTML:

function toggle_visibility(id) {
  var e = document.getElementById('menu-items');
  if ($(e).css('display') == 'block') {
    $(e).slideUp('fast');
  } else {
    $(e).slideDown('fast');
  }
};

.mobile-menu {
  display: none
}

@media only screen and (max-width: 680px) {
  #menu-items {
    display: none
  }
  .mobile-menu {
    display: block;
    cursor: pointer;
  }
}

<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>	

<div id="menu-items">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>

</div>
<!--#menu-items-->

菜单效果很好，但我遇到的主要问题是，当用户减小窗口大小以显示响应式菜单切换，然后使用切换打开然后关闭菜单时，菜单永远不会返回到正常 View 当窗口大小调整回桌面 View 时。

奇怪的是，如果用户在移动 View 中保持响应式菜单打开并将大小调整回桌面，它确实会返回，但如果用户关闭菜单则不会返回。

我想在这个菜单上做的唯一一件事是，如果用户单击页面中除菜单之外的任何其他位置，菜单将关闭。目前，用户必须单击菜单切换链接才能将其关闭。

任何帮助将不胜感激!!!

非常感谢。

Answer 1

试试这个:

@media only screen and (min-width: 680px) {


 #menu-items {
    display: block
  }
  .mobile-menu {
    display: none;
    cursor: pointer;
  }

}