Question

在宽度800像素以下，我的<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>在媒体查询中被CSS #main_navigation隐藏。单击菜单图标（在800px以下可见）将触发以下jQuery脚本：display: none 它将jQuery('#main_navigation').slideToggle(300);插入该标签，再次单击将其更改为style:'display: block'。

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

但是，当我在纵向模式下单击/点击两次图标（显示然后隐藏），然后将平板电脑切换为横向模式时，图标（由于样式表）都不正常（由于jQuery设置了style:'display: none'）属性：根本没有菜单！

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

style

但是：它不起作用，我的菜单标签仍然包含jQuery(window).on('orientationchange', function () { jQuery('#main_navigation').removeAttr('style'); });，因此在上述情况下没有可见的菜单。错误在哪里？

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函数不起作用

1 个答案: