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

我有一个问题，当从平板电脑切换到风景时，反之亦然，平板电脑不会重新执行jQuery代码。平板电脑纵向/横向切换不重新执行jQuery？

下面是这种情况：

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

最初，UI元素通过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元素。是否有解决方法，以便每次切换方向时浏览器都会执行代码？

来源

2013-08-21 user2395853

你见过这个http://stackoverflow.com/a/13869089/562036？ – Jianhong

谢谢，但这并不能解决问题。我的主要问题是如何在从纵向切换到横向时改变内联样式，或者反之亦然（基于窗口宽度）。因为看起来平板电脑只能执行CSS，而当窗口宽度发生变化时，不能使用JS。 – user2395853

您可以使用.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-21 06:14:00

谢谢！有用。 – user2395853

@ user2395853总是欢迎兄弟 –

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

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

来源

2013-08-21 06:08:48

谢谢，我使用.resize（）来解决问题。 – user2395853

根据您的浏览器支持的要求，您可以使用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-21 06:27:49 dc5

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

回答

相关问题