【发布时间】：2015-06-03 09:14:32
【问题描述】：
JSFiddle：http://jsfiddle.net/nbh1rn33/
我对 jQm 面板有一个奇怪的问题。
打开的面板没有完全关闭。见下图：
奇怪的是，这只发生在 Android 浏览器上，而不是 PC（Chrome、IE）上。
这是 jQm 的错误还是我做错了什么？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" >
<h1>Test Page</h1>
<div data-type="horizontal" data-role="controlgroup">
<a href="#search_condition_panel" id="search_condition_btn" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-grid">Show Options</a>
</div>
</div>
<div role="main" class="ui-content">
</div>
<div data-position-fixed="true" data-role="panel" data-display="overlay" id="search_condition_panel" data-position="right">
<div class="ui-field-contain">
<label for="search-condition-select-brand">Brand</label>
<select id="search-condition-select-brand" name="search-condition-select-brand" data-mini="true">
</select>
</div>
</div>
<div id="datepicker"></div>
</div>
</body>
</html>
【问题讨论】：
-
您的代码在我的 nexus Android 5.1.1 上运行良好，您尝试的是哪个浏览器和操作系统版本？
-
Galqxy S4 Android 4.4.2 默认浏览器。
-
我尝试在我的 PC 上将网站模拟为 Chrome 中的三星 S4，但未能成功重现该问题。我还在 Note 4 上尝试了股票浏览器，但没有成功。您手机上的其他浏览器是否也会出现这种情况？
-
@John Carpenter 这只发生在股票浏览器上。我刚刚在 Android chrome 上尝试过，该网站运行良好。如果有帮助的话，手机型号是 SHV-E300S。
-
我可怕的解决方法是在面板关闭时重新加载页面：
$(document).on('pageinit', function() { $('[data-role="panel"]').on("panelclose", function( event, ui ) { location.reload(); }); });
标签： javascript android jquery html jquery-mobile