在$(window).resize()上有条件地切换CSS

Conditionally toggling CSS on $(window).resize()

本文关键字：CSS 有条件 resize window      更新时间：2023-09-26

我试图运行以下脚本，它似乎不工作。我是一个新手，这是我在测试和试图弄清楚事情是如何工作的。可能有更好的方法来做我在这里做的事情，或者可能我只是误解了函数。

基本上，我做了一个链接，给它的类.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();
});

您缺少else -当屏幕比799px窄时该怎么办?

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

我终于明白我做错了什么。看起来代码没问题。我做错的事太蠢了，我都不想说。我只想说，在需要3台显示器的繁忙工作中练习编写代码并不总是一个好主意。

谢谢大家。

相关文章：