HTML切换菜单消失

HTML Toggle Menu Disappearing

本文关键字：消失 菜单 HTML      更新时间：2023-09-26

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

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

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

你可以通过使用javascript window.innerWidth和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
   }
}

编辑:

看这里…

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

我认为你的CSS导致了这种意想不到的行为。假设Menu元素在屏幕上总是可见的。

我已经修改了你的css属性如下，它为我工作。

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

希望能有所帮助。

看这个。它说-(破折号)是一个css选择器，所以你的。t-m意味着它是滑动m元素，前面是。t类。将类名改为只包含字母，如下所示:.tm

相关文章：