jquery - 禁用/隐藏页眉和页脚操作指南

Question

我使用多页和外部页眉页脚创建 JQM 应用程序。我在应用程序的某个点(不是应用程序的第一页)使用以下代码初始化页眉和页脚:

function initHeaderFooter(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
}

现在我的问题是，用户注销后，回到首页，我在删除页眉和页脚时遇到问题。

我尝试使用以下代码希望删除页眉和页脚。但它并没有删除该栏，而是显示一个空栏而不是隐藏该栏:

$('.ui-footer').html($('').navbar());

请建议删除页眉和页脚的正确方法。

为了再次显示页眉和页脚，我调用了初始化函数，但它没有显示:

$(document).on('pagecreate', '#userMainPage', function () {
    initHeaderFooter();
    $('.ui-footer').html($(
    '<div id="footerButton" data-role="navbar"><ul><li><a href="#restaurantList" data-transition="flow">Find Restaurant</a></li><li><a href="#">My Favourite</a></li></ul></div>'
).navbar()); });

Answer 1

要隐藏/显示任何元素，您只需添加/删除 ui-screen-hidden 类即可。这个类只是一个带有 display: none; 的 CSS 类。 .toggleClass()是 .addClass() + .removeClass() 在一个函数中。

请注意，当您隐藏/显示工具栏时，您需要在显示/隐藏工具栏后更新页面的高度。

$("[data-role=header], [data-role=footer]")
    .toggleClass("ui-screen-hidden", function () {
    $.mobile.resetActivePageHeight();
});

Demo