Question

我试图运行以下脚本，但它似乎无法运行。我非常喜欢菜鸟，这就是我测试并试图找出工作原理的方法。可能有更好的方法去做我在这里做的事情，或者我只是误解了这些功能。

基本上，我创建了一个链接，给了它.home的课程，并且正在切换visibility。第一段代码可以正常工作。

然后，当我检测到调整大小时，我决定使用$(window).resize();函数来执行另一个切换。这部分不起作用。

$(document).ready(function(){

    //Click Toggle
    $('.toggle').click(function() {
        if ($('.home').css('visibility') == 'hidden') {
            $('.home').css('visibility', 'visible');
        } else {
            $('.home').css('visibility', 'hidden');
        }
    });

    //showHome
    var showHome = function () {
        if ($(window).width() > 799) {
            $('.home').css('visibility', 'visible');
        };
    };

    $(window).resize(showHome);
    showHome();

});

Answer 1

您错过了else - 当屏幕比799px更窄时该怎么办？

＆＃13;

//Click Toggle
$('.toggle').click(function() {
  if ($('.home').css('visibility') == 'hidden') {
    $('.home').css('visibility', 'visible');
  } else {
    $('.home').css('visibility', 'hidden');
  }
});

//showHome
var showHome = function() {

  if ($(window).width() > 799) {
    $('.home').css('visibility', 'visible');
  } else {
    $('.home').css('visibility', 'hidden');
  }
};

$(window).resize(showHome);
showHome();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>other stuff</p>

<p class="home">HOME</p>

<button class="toggle">toggle</button>

＆＃13;

Answer 2

我实际上弄清楚我做错了什么。看起来代码很好。我做错的是如此愚蠢，我甚至不会说它是什么。可以说，尝试编写代码同时还要工作需要3台显示器的繁忙工作并不总是一个好主意。

无论如何，谢谢你们。

有条件地在$（window）.resize（）上切换CSS

2 个答案: