jQuery移动面板不会仅在Android浏览器上完全关闭
l46*_*kok 7 html javascript jquery android jquery-mobile
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>
看起来像 jQuery UI bug，对于 1.4.2，它无法重现，但它重现了。在我的 Galaxy S4 上进行测试
\n\n您的情况的主要区别在于类的 \xd1\x81ss 属性.ui-panel-closed：
/* 1.4.5 */\n.ui-panel-closed {\n width: 0;\n max-height: 100%;\n overflow: hidden;\n visibility: hidden;\n left: 0;\n clip: rect(1px,1px,1px,1px);\n}\n/* 1.4.2 */\n.ui-panel-closed {\n width: 0;\n max-height: 100%;\n overflow: hidden;\n visibility: hidden;\n}\n如果你重置所有的leftcss 属性就可以正常.ui-panel-closed工作：
.ui-panel-closed {\n left: auto !important; // left auto fix problem\n}\n| 归档时间： |
|
| 查看次数： |
428 次 |
| 最近记录： |