平板電腦縱向/橫向切換不重新執行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？

回答

相關問題