jquery - 使用媒体查询和 jQuery 在 ToggleSlide() 后响应式导航菜单消失

Question

我正在尝试为智能手机创建一个响应式下拉导航。在单击切换 btn 之前，一切工作正常，但在单击导航后，导航也被隐藏在更大的范围内。我知道这在手机屏幕上不会很明显因为这是用户正在使用的屏幕尺寸，事实上他/她无法在该设备上切换到宽屏幕尺寸，但我想知道问题的逻辑以及如何防止它。这是我的 HTM 代码：

<a id="toggleMenu" href="#">Welcome</a>
   <ul class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">Portfolio</a></li>
        <li><a href="/work/">About Us</a></li>
        <li><a href="/clients/">Recent Work</a></li>
        <li><a href="/contact/">Contact</a></li>
   </ul>
<div class="banner"></div>

CSS：

@media screen and (max-width: 768px) { 
.nav {
  border: 0px solid #ccc;
  border-width: 0px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display:none;
}
.nav li {
  display: block;
  border: 1px solid #ccc;
  width:310px;
  background:#175e4c;
}
#toggleMenu {
  display:  inline-block;
  list-style: none;
  width:281px;
}

最后是 jQuery

$(document).ready(function() {
 $("#toggleMenu").click(function () {
 $('.nav').slideToggle();
 });
});

Answer 1

我一直有同样的问题。

这是我添加到我的 javascript 以修复它的内容：

$(window).resize(function() {
    if($(window).width() > 480) // or 768
        $('#.YourMenuIdOrClass').show();
});

不过，您可能希望将代码中的 480 更改为 768。