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') {
    }
});

如何从页面中隐藏 fixedtoolbar？在工具栏上设置 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。