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

禁用/隐藏页眉和页脚如何

1 个答案: