Question

在我的网站上，我使用了响应式设计。我有三个街区彼此相邻。当视口变小时，块将在彼此之下对齐。

然后，我隐藏第三个块的内容（使用CSS）。单击此块的标题时，将显示内容。

此功能仅适用于响应式视图。我使用了两个断点，要知道哪一个是活跃的，我创建了两个元素：#rd-m和#rd-s。

他们的CSS是：

#rd-m, #rd-s {
    display: none;
}
@media screen and (max-width: 73em) {
    #rd-m {
        display: none;
    }
}
@media screen and (max-width: 45em) {
    #rd-m {
        display: none;
    }
    #rd-s {
        display: block;
    }
}

所以我的功能只应在#rd-s可见

时才有效

$(function() {
    if($('#rd-s').css('display') == 'block') {
        $(".search-bar>div:nth-child(3) h2").on("click", function() {
            if( $("[usemap='#map-nl']").css('display') == 'none' ) {
                $("[usemap='#map-nl']").slideDown('slow', function() {
                    $('map').imageMapResize();
                });
            }
            else {
                $("[usemap='#map-nl']").slideUp();              
            }
        });
    }
});

这一切都适用于页面加载。如果我看一个小视口，该函数会触发，当我看到一个大视口时它不会。

但是当页面已经加载，并且视口调整大小时，该函数不起作用。我该如何解决这个问题？

Answer 1

在单击处理程序外部进行('display') == 'block'检查时，如果未显示该元素，则不会加载处理程序。而是在单击处理程序中移动条件，使其始终加载，然后在每次执行单击处理程序时检查('display') == 'block'。

$(function() {
    $(".search-bar>div:nth-child(3) h2").on("click", function() {

        if($('#rd-s').css('display') == 'block') { // now checking inside the handler

            if( $("[usemap='#map-nl']").css('display') == 'none' ) {
                $("[usemap='#map-nl']").slideDown('slow', function() {
                    $('map').imageMapResize();
                });
            }
            else {
                $("[usemap='#map-nl']").slideUp();              
            }
        }
    });
});

Answer 2

您可以通过此函数捕获jQuery resize 事件：

$(window).on('resize', function () {

   //your function

});

在你的情况下，我瘦了你应该使用像这个fidle中的东西：

http://jsfiddle.net/626B2/875/

（看看JS代码）

编辑：请记住，也许你需要用于JS代码onresize的IF。

例如：

if (window.width() > 300) {
  //my code
}

只在响应视图中激活jQuery函数

2 个答案: