代码之家 › 专栏 › 技术社区 › Johannes

jquery orientationchange函数不工作

orientation-changes jquery

0

Johannes · 技术社区 · 5 年前

低于800px宽我的 #main_navigation 被CSS隐藏 display: none 在媒体查询中。单击菜单图标(在800px以下可见)将触发此jquery脚本: jQuery('#main_navigation').slideToggle(300); 它插入 style:'display: block' 当再次单击时,更改为 style:'display: none' .

现在,当我使用1024x768平板电脑/iPad时,在横向模式下,菜单会定期显示(作为水平列表),在纵向模式下,它是隐藏的(由菜单图标表示),当我单击菜单图标时显示。

但是,当我在纵向模式下单击/点击图标两次(显示,然后隐藏),然后将平板电脑转换为横向模式时,图标(由于样式表的原因)都没有。也不常规菜单(由于 样式:'显示:无' jquery设置)属性显示:没有菜单!

所以我插入了这个函数,希望简单地删除/删除 style 属性,当转动设备,使菜单在800px宽度以上再次可见时(即应用常规样式表和媒体查询):

jQuery(window).on('orientationchange', function () {
    jQuery('#main_navigation').removeAttr('style');
});

但是:它不起作用,我的菜单标签仍然包含 样式:'显示:无' ,因此在所描述的情况下没有可见的菜单。错误在哪里?

1 回复 | 直到 5 年前

1

Louys Patrice Bessette 5 年前

请尝试在重新对显示进行缩放时使用与当前宽度有关的条件:

如果 orientationchange 不工作(应该工作),请尝试添加 resize 事件。

jQuery(window).on('orientationchange resize', function () {
  if(jquery("body").width()>768){  // Make sure to test that width... Just a suggestion here.
    jQuery('#main_navigation').show();
  }
});