响应式菜单在窗口调整大小时消失答案

【问题标题】：Responsive menu disappearing on window resize响应式菜单在窗口调整大小时消失
【发布时间】：2015-11-06 07:58:41
【问题描述】：

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

这是我的代码：

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-->

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

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

我唯一希望在此菜单上工作的另一件事是，如果用户单击页面中除菜单之外的任何其他位置，则菜单将关闭。目前，用户必须单击菜单切换链接才能将其关闭。

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

非常感谢。

【问题讨论】：

标签： javascript jquery html menu responsive-design

【解决方案1】：

在这里使用 slideUp() 和 slideDown() 有点棘手，因为它们设置/删除了内联样式 'display: none;'调整窗口大小时不会删除它。这就是菜单没有重新出现的原因：隐藏菜单的内联样式仍然有效。

您需要做的是使用类来处理不同设备宽度下的显示，并为 slideUp 的完整回调添加挂钩：(JSFiddle)

CSS：

.mobile-menu {
    display: none
}

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

@media only screen and (min-width: 681px) {
    .collapsed {
        display:block;
    }
}

JS：

function toggle_collapsed_class(e) {
    $(e).css('display', '').addClass('collapsed');
};

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

【讨论】：

【解决方案2】：

试试这个：

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


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

}

【讨论】：