javascript - 在方向更改时隐藏 jQuery Mobile 固定工具栏

Question

使用 jQuery Mobile，我可以使用以下方法在页面上创建一个固定的工具栏：

<div data-role="header" data-position="fixed">Content</div>

我想做的是在设备方向改变时隐藏固定标题，我可以使用以下方法检测到这一点：

$(window).on('orientationchange ', function() {
    if (event.orientation === 'portrait') {

    }
    else if (event.orientation === 'landscape') {
    }
});

如何从页面中隐藏固定工具栏？工具栏上的设置display: none有效，但在标题之前的位置留下了一个空白区域。

Answer 1

工作示例：http: //jsfiddle.net/d2mMv/

Javascript：

$(document).on('pagebeforeshow', '#index', function(){       
    $('#test-header').hide();
    $('#test-content').addClass('test-content');
});

CSS：

.test-content {
    margin-top: -40px !important;
}

不幸的是，因为我们隐藏了一个标题，它仍然存在，所以我们可以触发create、pagecreate或updatelayout，因此我们需要使用 css 手动完成。