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

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

​

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

奇怪的是，如果用户在移动视图中打开响应菜单并调整大小回到桌面，它会返回，但如果用户关闭菜单，则不会返回。

我想要做的另外一件事就是，如果用户点击页面中除菜单之外的任何地方，菜单就会关闭。此时，用户必须单击菜单切换链接才能将其关闭。

任何帮助都将非常感谢！

非常感谢。

Answer 1

试试这个：

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


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

}

Answer 2

这里使用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');
    }
};