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();
        }

    });
});

为什么此jQuery代码只能运行一次？

3 个答案: