Question

我正在使用Squarespace中相当严格的模板。我只需要在一个页面上显示侧边栏导航，然而Squarespace不支持这一点，并且在我不需要它的许多其他页面中显示侧面导航。

我已经编写了以下内容，但它可以在删除它并更改页面之前呈现#rightSidebar，只需不到一秒钟，但它看起来仍然很差。

$(document).ready(function() {

    // turn sidebar off on any pages it shouldn't be
    if ($("body").is('.item-main-image, .collection-5a9ebc04e2c4835e358488e3')) {

        // CSS alterations
        $(".collection-type-blog #content").css("width", "100%");
        $(".collection-type-blog #content").css("max-width", "700px");
        $(".collection-type-blog #content").css("display", "block");
        $(".collection-type-blog #content").css("margin", "0 auto");
        $("#rightSidebar").css("display", "none");
        $("#rightSidebar").css("width", "0");
    }

});

有没有办法可以阻止#rightSidebar渲染，或者我可以在页面加载之前运行这段代码吗？

Answer 1

创建CSS规则以隐藏侧边栏

#rightSidebar { display: none; }

如果您希望它显示，请让您的JavaScript显示。

$('#rightSidebar').show();

使侧边栏显示为none将阻止浏览器尝试渲染它，从而防止显示和javascript之间的分秒将其删除。

在页面加载之前运行JQuery

1 个答案: