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。

在使用媒体查询和jQuery的ToggleSlide（）之后，响应式导航菜单消失

1 个答案: