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

Question

我正在使用 Cordova/PhoneGap 开发一个 Jquery 移动应用程序，我希望在我的 header 正下方有一个固定位置的导航栏，因此导航栏不会滚动内容。如果我将导航栏放在 header 内，它会继承 header 的样式，并且导航栏的 css 不会像它应该的那样运行。例如。当我单击导航栏中的项目时没有突出显示，它只是保持与 header 本身相同的颜色（在我的例子中是黑色）并且也没有更多可见的边框。只有项目内的文本响应点击。我查了几个例子，但其中 none 似乎对我有用：
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>

CSS for class iconnavbar 如下：

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

但这对我的问题应该没有任何影响。事实上，我也试图剥离所有内容，使其看起来与其中一个示例完全一样，但我仍然得到同样糟糕的结果。

那么我该如何解决这个问题呢？或者是否有一种 better/alternative 方法可以像示例中那样在我的页面顶部添加一个固定位置的导航栏？

下面是菜单在 iPhone 上的外观和按下项目 3 的屏幕截图。

Answer 1

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

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

它也影响了我试图添加的导航栏。通过简单地将 css 更改为：

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

我只实现了元素类型 'a' 的 header 的直接子元素的样式。我也更喜欢导航栏是 data-theme a 而 header 本身是 data-theme b。为此，我创建了一个带有 header 包装器 class 的固定 header。这将我的 header 的两个不同部分包装在一起。我将这两个不同的部分保留在不同的 div 中，因此我可以使用与导航栏不同的主题来设计 header 顶部的样式。最终代码如下：

<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 中使用的 classes/attributes 完全无关，您可以将它们替换为您想要的任何内容。最终结果：

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

Jquery mobile navbar styling in header not working properly

html

jquery

jquery-mobile

cordova

jquery-mobile-navbar