jQuery orientationchange 功能不工作

Question

宽度低于 800 像素时，我的 #main_navigation 在媒体查询中被 CSS display: none 隐藏了。单击菜单图标（在 800 像素以下可见）会触发此 jQuery 脚本：jQuery('#main_navigation').slideToggle(300); 它将 style:'display: block' 插入到该标记中，再次单击时，它会变为 style:'display: none'。

现在，例如，当我使用 1024x768 tablet/iPad 时，在横向模式下，菜单会定期显示（作为水平列表），在纵向模式下，它会隐藏（由菜单图标表示）并在我单击菜单图标。

但是当我 click/tap 在纵向模式下图标两次（显示，然后隐藏）然后将平板电脑变成横向模式时，图标（由于样式表）和显示常规菜单（由于jQuery设置的style:'display: none'）属性：根本没有菜单！

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

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

但是：它不起作用，我的菜单标签仍然包含style:'display: none'，因此在描述的情况下没有可见的菜单。哪里出错了？

Answer 1

尝试在调整显示时使用有关当前宽度的条件：

如果 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();
  }
});

jQuery orientationchange 功能不工作

jQuery orientationchange function not working

jquery

orientation-changes