jQuery 移动面板仅在 Android 浏览器上无法完全关闭

Question

我对 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>

Answer 1

看起来像 jQuery UI 错误，对于 1.4.2 它不能是 reproduced and it reproduced 对于 1.4.5。在我的 Galaxy S4 上测试

您的情况的主要区别在于 class .ui-panel-closed:

的 сss 属性

/* 1.4.5 */
.ui-panel-closed {
  width: 0;
  max-height: 100%;
  overflow: hidden;
  visibility: hidden;
  left: 0;
  clip: rect(1px,1px,1px,1px);
}
/* 1.4.2 */
.ui-panel-closed {
  width: 0;
  max-height: 100%;
  overflow: hidden;
  visibility: hidden;
}

如果您为 .ui-panel-closed 重置 left css 属性一切都会正常 fine:

.ui-panel-closed {
  left: auto !important; // left auto fix problem
}

jQuery 移动面板仅在 Android 浏览器上无法完全关闭

jQuery mobile panel doesn't close fully only on Android browser

html

javascript

jquery

android

jquery-mobile