javascript - HTML 切换菜单消失

Question

我创建了一个简单的 HTML 菜单并对其应用了一些媒体查询。我正在使用一个菜单 Hook ，点击它会在带有 jquery 中的 slideToggle 的小型设备上带来菜单。当我们将小屏幕上的菜单切换为可见并最大化屏幕时，它一切正常，但如果我们切换为隐藏菜单并使用隐藏菜单最大化屏幕，它就会消失。您可以通过调整窗口大小和切换菜单来进行检查。下面是我用来切换菜单的 jquery。

$(function(){
    $("#toggle").click(function(){
        $(".t-m").slideToggle("slow");
    });
});

这是代码链接 http://codepen.io/SurajVerma/pen/thEKp .

提前致谢。

Answer 1

您可以在 window.onresize = function(event){...} 的帮助下使用 javascript window.innerWidth 实现此目的...

window.onresize = function(){

   if(window.innerWidth > 641){
     $(".t-m").slideDown("fast"); // show .t-m when screen size is > 641

   }
   if(window.innerWidth <= 640){
     $(".t-m").slideUp("fast"); // hide .t-m when screen size is <= 640
   }

}

编辑:

查看here...

注意:不要调整浏览器的大小，只需调整页面内的窗口。