Question

我正在构建一个自适应网站，当浏览器的宽度超过500像素时，.bio内容会被隐藏，当它出现在手机上时，会显示。

好的是，它可以工作，但在页面加载到这些维度时。因此，如果我的Firefox窗口是400px并且我将窗口调整为900，那么bio仍然可见。如果我以900px加载页面，生物被隐藏，应该是。

当窗口大小发生变化时，如何再次触发jQuery？

 $(function(){
    if($(window).width() > 500){
        $('.speakers li').hover(function(){
            $(this).find('.hide').toggle();
        });
    }else{
        $('.speakers li .bio').removeClass('hide');
    }
 });

Answer 1

根据MackieeE的建议，仅使用媒体查询使用CSS进行计算。

阻止我在开始时使用媒体查询的原因是内容被display：none隐藏。在这种情况下，：悬停不可用，因为没有任何东西可以悬停。不透明就是诀窍。

我想，如果你需要点击透明div下的链接，你可以通过绝对定位来交换z-index。

 .ease {-webkit-transition:All 0.15s ease; -moz-transition:All 0.15s ease; -o-transition:All 0.15s ease; -ms-transition:All 0.15s ease; transition:All 0.15s ease;}

 .bio {
    @media(min-width:@screen){
        opacity:0;
           /* more style */

    }

    @media(max-width:@phone){
        opacity:1;
           /* more style */
    }
 }

 .bio:hover {
    @media(min-width:@screen){
        .ease;
        opacity:1;
    }               
 }

Answer 2

您可以设置一个布尔值来检测用户是否小于之前的调整大小这样的事情应该有效

var run = true;
$(window).resize(function() {
   resizeEvt()
});
function resizeEvt()
{
  if($(window).width() > 500 && run){
        $('.speakers li').hover(function(){
            $(this).find('.hide').toggle();
        });
        run = false
    }else if ($(window).width() < 500 && !run){
        $('.speakers li .bio').removeClass('hide');
        run = true
    }
}

每次用户调整大小时它仍然会运行，但它不应该像悬停部分一样远。

并做什么

我没有测试过这段代码，但基本原理应该可行

响应内容的jQuery监听器

2 个答案: