Question

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

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

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

提前致谢。

Answer 1

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

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

注意：请勿调整浏览器的大小，只需调整页面内的窗口。

Answer 2

我认为您的CSS导致了这种意外行为。假设Menu元素始终在屏幕上可见。

我已经修改了你的css属性如下，它对我有用。

#toggle{
    float: right;
    display: inline;
}

.t-m{
    float: right;
    display: none;
}

希望它有所帮助。

Answer 3

见 this。它说 - （破折号）是一个css选择器，所以你的.t-m意味着它是滑动m元素，它先于.t类。更改类名仅包含字母，如下所示： .tm

HTML切换菜单消失

3 个答案: