在移動視圖中使用jquery修改css（> 720px）

在我的codepen項目網站的第二頁上，我有一個jquery事件，當視圖大於720px寬時，會使一個blurb向右打開。在移動視圖中使用jquery修改css（> 720px）

我試圖讓寬度小於720px的「點擊滑動右」的東西消失。然而，在初始加載頁面時，blurb顯示並且在該區域中單擊似乎不起作用。另外，當我儘可能縮小瀏覽範圍時，「點擊滑動」會隨着街景一起消失，但當我調整到全屏時不會回來。我在這裏做錯了什麼？

注意我現在知道如何使用媒體查詢來解決此問題，但是我想查看是否可以在我的jQuery腳本中實現它，而不必在css中進行更改。

建議？

的jQuery：

$(window).resize(function() { 
 
    var width = $(window).width(); 
 
    if (width < 720) { 
 
     $("#flip").hide(); 
 
    } 
 
    else 
 
    { 
 
     $(".lead").hide(function(){ 
 
$("#flip").click(function(){ 
 
    $(".lead").toggle('slide','right',500); 
 
}); 
 
    }); 
 
    } 
 
});

來源

2016-02-23 user2763557

試試這個。

// Your responsive logic 
var myResize = function(){ 
    var width = $(window).width(); 
    if (width < 720) { 
     $("#flip").hide(); 
    }else{ 
     $(".lead").hide(); 
     $("#flip").show(); 
    } 
}; 
// Execute it every resize 
$(window).resize(myResize); 
$(myResize); // Execute it on ready as well 
// Keep the click event handlers outside so they get defined once 
$("#flip").click(function(){ 
    var width = $(window).width(); 
    if (width > 720) { 
     $(".lead").toggle('slide','right',500); 
    } 
});

來源

2016-02-23 02:07:19 JCOC611

這是完美的！看起來像我在正確的道路上，但我沒有涵蓋我的代碼中的一些關鍵點......看起來是另一個工作。至少很好知道我在正確的道路上。非常感謝！ – user2763557

不用擔心！你有幾乎所有的重要部分 – JCOC611

您可以使用：

<script> 
    if (window.matchMedia("(min-width: 720px)").matches) { 
    /* Code to execute */ 
    } else { 
    /* Code to execute */ 
    } 
</script>

您可以參考這個tutorial。

來源

2016-02-23 02:04:25 Mehdi

這隻會執行一次，而不是每個調整大小。另外，你鏈接的教程是用法文寫的......對S.O來說並不是最好的。 – JCOC611

在移動視圖中使用jquery修改css（> 720px）

回答

相關問題