jQuery mobile中的标题高度更改以响应单击

我在jQuery移动电话差距应用程序中有一个页面,它表现得很奇怪。 每当我点击主体(内容)时,标题增加的是高度。 从检查元素开始,似乎H1标题在响应点击时向右和向下移动,增加了与左侧图标的距离。 我使用jquery mobile 1.3.2和nativeDroid 2.2.0 。 我的代码如下:

Feedback

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

它也发生在其他页面上,即使它们包含listview(具有静态内容,而不是链接)。

以下是页面的外观:

好行为

点击文本后会发生这种情况。 请注意,标题已移至右侧和底部

不良行为

第二次单击会将大小恢复为原始位置。 我怎么能阻止这个?

当您单击文本时,jQM似乎在标题中切换了一个名为ui-fixed-hidden的类。 尝试添加以下CSS以覆盖添加的填充:

 .ui-header.ui-fixed-hidden { padding: 0; border-top-width: 1px; border-bottom-width: 2px; } .ui-header-fixed > .ui-btn-icon-notext{ top:6px } 

更新:添加css以保持图标到位,并修复底部边框CSS以保持宽度不变。 这是一个小提琴演示: DEMO

更新2:

您可以在标头或javascript中尝试使用data-tap-toggle="false"属性,而不是上面的CSS修复:

 $( ".selector" ).fixedtoolbar({ tapToggle: false }); 

以下是API文档: http : //api.jquerymobile.com/fixedtoolbar/#option-tapToggle ,这里是更新的演示: DEMO 2