0

在将平板电脑从纵向切换到横向时遇到问题，反之亦然，平板电脑不会重新执行 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 元素时，似乎这段代码从未执行过。有没有办法让浏览器在我每次切换方向时都执行代码？

4

3 回答 3

3

您可以.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");
            }
        }
    });
});
于 2013-08-21T06:14:00.217 回答
1

根据您的浏览器支持要求，您可以使用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。

于 2013-08-21T06:27:49.277 回答
0

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

window.addEventListener("orientationchange", function() {
    alert("orientationchange");
}, false);
于 2013-08-21T06:08:48.270 回答