Question

将平板电脑从纵向切换到横向时出现问题，反之亦然，平板电脑不会重新执行jQuery代码。

以下是该方案：

<div class="links">
  <ul class="hide">
    <li></li>
  </ul>
</div>

最初，ul元素通过 CSS 隐藏。然后我给这个代码打开点击事件。

if ($(window).width() <= 800) { // portrait orientation
    $(".links").click(function() {
       $(this).find('ul').slideToggle();
    });
}

到目前为止效果很好。如果我不点击任何东西，它仍然可以正常工作，即使我不停地来回切换。在纵向方向上出现问题时，我单击元素将其打开并再次单击以关闭。

似乎在第二次点击后，ul元素获得了额外的style="display:none"（最初这不是因为它由 CSS 处理）。这就是我切换回横向时隐藏ul元素的原因。然后我试着在下面给出这个代码。

if ($(window).width() > 800) { // landscape orientation
    if ($('.links ul').is(":hidden")) {
        $('.links ul').css("display","block");
    }
}

但是，每当我切换到横向方向时，似乎永远不会执行此代码，而是隐藏了ul元素。有没有解决方法，以便浏览器每次切换方向时都会执行代码？

Answer 1

您可以在调整屏幕大小时使用.resize() jQuery handler来检查窗口的高度，

$(document).ready(function(){
    $(window).resize(function()
    {
        if ($(window).width() > 800)
        { // landscape orientation
            if ($('.links ul').is(":hidden"))
            {
                $('.links ul').css("display","block");
            }
        }
    });
});

Answer 2

根据您的浏览器支持要求，您可以使用orientation change和matchMedia的组合。

根据MDN: window.matchMedia，移动支持是合理的：

Feature        Android   Firefox Mobile (Gecko)   IE Mobile      Opera Mobile   Safari Mobile
Basic support      3.0              6.0 (6.0)     Not supported          12.1        5

根据您的需要，还有一些matchmedia polyfills可用：

如果将其与orientationchange结合使用，则可以执行以下操作：

window.addEventListener("orientationchange", function(evt) {
    if (window.matchMedia("(min-width: 400px)").matches) {
      /* the view port is at least 400 pixels wide */
    } else {
      /* the view port is less than 400 pixels wide */
    }    
}, false);

这可以让你对你的方向变化有相当不错的控制。

如果您愿意使用其他库Enquire.js，那么对匹配和不匹配的事件都有一些很好的支持。它很小，不需要jQuery。

Answer 3

您可以设置一个事件监听器，例如：

window.addEventListener("orientationchange", function() {
    alert("orientationchange");
}, false);

平板电脑肖像/横向切换不是重新执行jQuery？

3 个答案: