Question

我正在创建一个JQuery Mobile网络应用程序，并遇到了一个有趣的问题。我的网络应用程序动态填充JSON数据的列表视图。

问题：当用户点击第1页列表视图中的元素时，第2页加载正常，但是，当他们点击＆＃34;返回＆＃34;按钮，第1页无法正确显示。

我最初认为这些行没有被填充，但是我还没想到它们被JQuery Mobile CSS隐藏了:(从JQuery Mobile 1.4.2.css的第946行开始，可以在这里找到： http://jakeserver.com/Apps/BostonLandmarks/B7/css/jquery.mobile-1.4.2.css）

/* Page and overlay */
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
    background-color:           #f9f9f9 /*{a-page-background-color}*/;
    border-color:           #bbb /*{a-page-border}*/;
    color:                  #333 /*{a-page-color}*/;
    text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/     #f3f3f3 /*{a-page-shadow-color}*/;
}

遇到问题的网页：http://jakeserver.com/Apps/BostonLandmarks/B7/landmarks.html 呈现菜单行的JavaScript：http://jakeserver.com/Apps/BostonLandmarks/B7/js/landmarks.js

我注意到如果注释掉background-color，就会出现行（但会出现其他视觉错误），但是，它们似乎位于页面的较低层。

关于可能导致此分层问题的任何想法？

感谢。

Answer 1

我认为这最终会导致细节页面上的后退按钮出现问题。

后退按钮代码最初是：

<a href="#landmarks" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back" data-theme="a">Back</a>

但是，我认为href和data-rel存在冲突。我删除了data-rel并保留了href，并且页面分层的问题消失了。

故事的道德：如果您知道要返回的页面（并且不依赖于浏览器的历史记录），最好href到该页面，因为冲突会更少

JQuery Mobile ui-overlay隐藏元素

1 个答案: