0

我在 jQuery mobile phonegap 应用程序中有一个页面，它的行为很奇怪。每当我单击正文（内容）时，标题都会增加高度。通过检查元素，似乎 H1 标题响应点击而向右和底部移动，增加了它与左侧图标的距离。我使用 jquery mobile 1.3.2 和nativeDroid 2.2.0。我的代码如下：

<div data-role="page" id="feedbackPage" data-theme="b">

    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Feedback</h1>
        <a href="#feedbackPagePanel" data-icon='reorder' data-iconpos="notext"></a>
    </div>
    <div data-role="content">
        <p>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.</p>
        <form>
            <textarea cols="40" rows="8" name="feedback" id="feedback"></textarea>
            <button type="submit" name="submitfeedback" id="submitfeedback">Send</button>
        </form>
        </p>
    </div>

    <div data-role="panel" id="feedbackPagePanel">
        <ul data-role="listview">
            <li data-icon="home"><a href="#homePage">Home</a></li>
            <li data-icon="envelope"><a href="#feedbackPage">Feedback</a></li>
            <li data-icon="cog"><a href="#settingsPage">Settings</a></li>
            <li data-icon="info"><a href="#aboutPage">About</a></li>
        </ul>
    </div>
    <!-- /panel -->
</div>

它也发生在其他页面上，即使它们包含列表视图（具有静态内容，而不是链接）。

以下是页面的外观：

好行为

这是单击文本后发生的情况。请注意标题已移至右侧和底部

不良行为

第二次单击将大小恢复到原始位置。我怎样才能防止这种情况？

4

1 回答 1

4

当您单击文本时，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：

除了上面的 CSS 修复，您可以尝试data-tap-toggle="false"标题上的属性，或者在 javascript 中：

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

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

于 2013-11-13T17:40:43.533 回答