Question

我正在使用Cordova / PhoneGap开发一个Jquery移动应用程序，我想在我的标题下直接使用导航栏，固定位置，因此导航栏不会滚动内容。如果我将导航栏放在标题内，它会继承标题的样式，并且导航栏的css表现不像它应该的那样。例如。当我单击导航栏中的某个项目时没有突出显示，它只是与标题本身保持相同的颜色（在我的情况下为黑色），并且也没有更多可见的边框。只有项目内的文本才会响应单击。我查了几个例子，但它们似乎都不适合我：
Example one
Example two

这是我的页面代码：

<div data-role="page" id="page_tasks">
    <div data-role="header" data-id="header" data-theme="b" data-position="fixed">
        <h1>Tasks</h1>
        <a href="#leftmenu" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars"></a>
        <div data-role="navbar">
        <ul>
            <li class="iconnavbar"><a href="#" data-href="overdue">1</a></li>
            <li class="iconnavbar"><a href="#" data-href="today">2</a></li>
            <li class="iconnavbar"><a href="#" data-href="thisweek">3</a></li>
            <li class="iconnavbar"><a href="#" data-href="nextweek">4</a></li>
            <li class="iconnavbar"><a href="#" data-href="later">5</a></li>
            <li class="iconnavbar"><a href="#" data-href="finished">6</a></li>
        </ul>
    </div>
    </div>

    <div data-role="main" class="ui-content">
        <!-- page content, unrelated -->
    </div>
</div>

类iconnavbar的CSS如下：

.iconnavbar {
 width: 16.66% !important;
 clear: none !important;
}

但这不应该对我的问题产生任何影响。事实上，我也尝试删除所有内容，因此它看起来就像其中一个例子，我仍然得到了同样糟糕的结果。

那么我该如何解决这个问题呢？或者是否有更好/替代的方法将导航栏添加到我的页面顶部，并在示例中使用固定位置？

下面是菜单在iPhone上的显示方式以及按下项目3的屏幕截图。

Answer 1

因为我使用样式来摆脱标题中的图标背后的方块，如下所示：

.ui-header a {
  background: none !important;
  border: 0px;
}

它也影响了我试图添加的导航栏。只需将css更改为：

.ui-header > a {
  background: none !important;
  border: 0px;
}

我只使用了元素类型标题的直接子元素＆＃39; a＆＃39;。我也更喜欢导航栏是数据主题a和标题本身数据主题b。为此，我创建了一个带有headerwrapper类的固定头。这将我标题的两个不同部分包裹在一起。我将这两个不同的部分保存在不同的div中，因此我可以使用与导航栏不同的主题来设置标题的顶部。最终代码如下：

<div data-role="page" id="page_tasks">
    <div data-role="header" class="headerwrapper" data-position="fixed">
        <div data-role="header" data-theme="b">
            <h1>Tasks</h1>
            <a href="#leftmenu" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars"></a>
        </div>
        <div data-role="navbar" id="tasksnavbar">
            <ul>
                <li class="iconnavbar"><a href="#" data-href="overdue">1</a></li>
                <li class="iconnavbar"><a href="#" data-href="today">2</a></li>
                <li class="iconnavbar"><a href="#" data-href="thisweek">3</a></li>
                <li class="iconnavbar"><a href="#" data-href="nextweek">4</a></li>
                <li class="iconnavbar"><a href="#" data-href="later">5</a></li>
                <li class="iconnavbar"><a href="#" data-href="finished">6</a></li>
            </ul>
        </div>
    </div>
    <div>
        <!-- here goes the content -->
    </div>
</div>

最后通过屏幕顶部的headerwrapper摆脱一些间距：

.headerwrapper {
  border-top: 0px !important;
  padding-top: 0px !important;
}

对于任何使用它的人：我在导航栏的ul中使用的类/属性完全不相关，你可以用你想要的任何东西替换它们。最终结果：

标题中的Jquery移动导航栏样式无法正常工作

1 个答案: