為什么這個 jQuery 代碼只工作一次？

Question

我有這個簡短的 jQuery 代碼可以在調整窗口大小時使圖片消失。 由於某種原因，它消失后，就不會再出現。 這是代碼：

$(document).ready(function(){
    $(window).resize(function(){

        if($(window).width() < 700) {
            $("#side-pic").css("display","none");


        } else if($(window).width() >= 700){

            $("#side-pic").css("display","show");
        }

    });
    });

此外，如果您有機會知道是否有辦法讓我的代碼中的某個 div 下的圖片移動，我會很高興聽到它！ 提前謝謝你們！

Answer 1

沒有顯示屬性，例如display: show 。 嘗試使用$("#side-pic").css("display","block"); 反而。

另一種選擇是隱藏/顯示：

$(document).ready(function(){
    $(window).resize(function(){

        if($(window).width() < 700) {
             $("#side-pic").hide();
        } 
        else if($(window).width() >= 700) {
             $("#side-pic").show();
        }

    });
});

Answer 2

那是因為"show"不是有效的display值。 https://developer.mozilla.org/en-US/docs/Web/CSS/display

另外，為什么else if else不夠好？
或者更確切地說是一個可重用的 CSS 類和 jQuery 的toggleClass()方法：

 jQuery( $ => { $(window).on('resize', function() { $("#side-pic").toggleClass("is-hidden", $(this).width() < 700); }); });

 .is-hidden {display: none;}

 <div id="side-pic">SIDE PIC</div> <script src="//code.jquery.com/jquery-3.1.0.js"></script>

Answer 3

您也可以編寫如下代碼

$(document).ready(function(){
    $(window).resize(function(){

        if($(window).width() < 700) {
            $("#side-pic").hide();


        } else if($(window).width() >= 700){

            $("#side-pic").show();
        }

    });
});