jQuery：调整窗口大小时，事件处理程序停止工作

debugcn 发表于 Dev

X先生

JSFiddle链接：http : //jsfiddle.net/4QLDC/6

这是我的JS代码：

var toggleContent = function (event) {
    $(event.target).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 980) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");
        $(".headBar1").on("click", toggleContent);
    }
    else {
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");
        $(".headBar1").off("click", toggleContent);
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

这就是我要实现的目标。

当窗口宽度小于300px时：

内容框应折叠
标题应成为链接
单击标题时，其内容框应切换

前两个正在发生，但是第三个是我遇到的麻烦。有时它会起作用，有时却不起作用（行为是无法预测的；在JSFiddle页面中，如果您尝试将“结果”帧的大小调整为6-7倍，则前六次将可以正常工作，但失败了。第七次）。我究竟做错了什么？如何解决这个问题？

朝hara

var toggleContent = function (event) {
    $(event.target).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    $(".headBar1").off("click");
    if (windowWidth < 300) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");        
        $(".headBar1").on("click", toggleContent);
    }
    else {        
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");       
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

那是你想要的吗？

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。