3

我有这段代码工作，但对我来说似乎很笨重，有没有办法简化？它的要点是我在页面加载时检查页面宽度并基于它显示或隐藏 div（基于浏览器是否比 480 像素更宽或更窄）。然后，如果用户调整浏览器窗口的大小，我会再次检查宽度并显示/隐藏正确的 div。无论如何，这可以用 jquery 或只是 js 来简化？

function pageWidth() {
        return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;
    }
    //Show/hide the correct div when the page loads
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
    // Show/hide the correct dropdown when the browser window is resized
    $(window).resize(function() {
        if (pageWidth() >= 480) {
            $(".siteSearchDropdown").css("display", "none");
            $(".siteSearchSelect").css("display", "block");
        }
        if (pageWidth() < 480) {
            $(".siteSearchDropdown").css("display", "block");
            $(".siteSearchSelect").css("display", "none");
        }
    });
4

4 回答 4

4

与其编写两次代码，不如在window.resize事件处理程序中编写一次，然后在元素上触发一个resize事件：window

$(window).resize(function() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
}).trigger('resize');

此外，由于此代码会在有人调整浏览器大小时运行多次，因此您应该通过缓存选择器来优化代码：

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    }
    if (pageWidth() < 480) {
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');

注意：我提到了resize在调整浏览器大小时事件处理程序代码是如何多次运行的。要自己测试，只需将此代码添加到页面并观察您的开发人员控制台运行：

$(window).resize(function (e) {
    console.log(e);
});

再次查看代码后，您可以通过使用if/else语句而不是运行pageWidth()两次函数来进一步优化：

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    } else {//notice the change in structure so the `pageWidth()` function is only called once
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');
于 2011-12-12T19:54:54.123 回答
2

如果你可以针对 CSS3 兼容的浏览器，你应该看看媒体查询。或者，还有一些 JavaScript 库，例如Respond，它们为旧版浏览器提供了相同的功能。

于 2011-12-12T19:59:41.057 回答
2

就像是：

function pageWidth() {
    return window.innerWidth || document.body.clientWidth;
}

function reconfig() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").hide();
        $(".siteSearchSelect").show();
    } else {
        $(".siteSearchDropdown").show();
        $(".siteSearchSelect").hide();
    }
}

$(window).resize(reconfig);

reconfig();
于 2011-12-12T20:03:14.370 回答
1

您不需要功能pageWidth()，只需使用$(window).width(). 此外，您不必复制代码来显示/隐藏 div，创建一个函数来执行此操作。

function showHide() {
  var isBigLayout = $(window).width() > 480;
  $(".siteSearchDropdown").css("display", isBigLayout ? "none" : "block");
  $(".siteSearchSelect").css("display", isBigLayout ?  "block" : "none");
}


$(window).resize(showHide); //Run when resized
showHide(); // Run initially, or $(showHide) to run after DOM is loaded
于 2011-12-12T19:58:56.003 回答