Question

我使用CSS在某些断点处显示和隐藏元素。我还使用jquery切换来显示/隐藏元素。如果我将浏览器的大小调整为移动大小，一切正常，但是当我调整浏览器大小以使其更大时，我使用Jquery隐藏的元素会被隐藏，从而在我的网页中留下空白。我需要一种无缝的方法来重置窗口调整大小或改变方向。

例如，我有一个菜单div，我用CSS隐藏平板电脑或手机，我使用CSS而不是菜单显示菜单图标。然后，当选择图标时，我使用Jquery显示/隐藏菜单。如果我将浏览器放大或将移动设备或平板电脑的方向更改为横向，则菜单不会显示用户是否使用图标隐藏菜单。我该如何解决这个问题？

Answer 1

我有同样的问题。这是我的解决方案的一个非常简单的版本：

$(window).on('resize',function(){
    if($(this).width() > 800){
        $('#Menu').removeAttr('style');
    }
});

或者菜单应显示的宽度。这样就可以通过按下按钮摆脱jQuery放入的“显示/隐藏”内联CSS。

我会说我的解决方案涉及更多的组件......在一个函数中，我注意到.on()处理程序为移动版本应用了一百万次，所以我在{}之前有.off() .on('click') ......那样的东西。但核心组件是删除jQuery为菜单提供的样式属性，以便不再覆盖您给它的CSS。