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

Question

使用jQuery Mobile我可以使用以下命令在页面上创建固定的toobar：

<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;
}

不幸的是因为我们隐藏了一个标题，它仍然存在，所以我们可以触发创建， pagecreate 或 updatelayout ，因此我们需要这样做用css手动。