【发布时间】：2017-10-16 08:34:28
【问题描述】：
我尝试四处搜索，但没有找到我能理解的相关主题。 总的来说，我对 Javascript 或编码不是很熟悉。
我正在使用 Jquery Mobile 1.4.5，这是我的问题：
我无法让外部面板正常工作。该面板在我的第一页上显示得很好，但是当我更改页面时，它不会按预期显示。我的计划是让面板以与 Jquery 移动演示页面上相同的方式工作。
在这里您可以看到面板始终显示，无论他们在哪个页面上，我发现他们不使用该网站上的外部面板，但应该仍然可以。
我的网站目前的运作方式：
- 加载第一页时面板工作正常 (#page_home)
- 进入新页面（#page_kodi 或 #page_download）时，它不会按预期自动显示。
- 当我输入 #page_kodi 或 #page_download 并手动打开它时，它会按预期显示
- 这是奇怪的部分：当我从（打开面板）#page_download 到 #page_kodi 到 #page_home（主页）时，它可以工作。
- 当我从 #page_home 转到另一个页面时，它不起作用。
这是我的面板 JS 代码，我确信有更好的方法来编写它，也许其中一些是不需要的。
Javascript：
<script>
<!-- Creates the panels & navbars/Tabs -->
$(document).on("pagecreate", function() {
$("body > [data-role='panel']").panel();
$("body > [data-role='panel'] [data-role='listview']").listview();
});
$(document).on("pageshow", function() {
$("body > [data-role='header']").toolbar();
$("body > [data-role='header'] [data-role='navbar']").navbar();
});
</script>
<script>
$(document).on("pagebeforeshow", function( event, data ) {
$('#leftpanel').panel("open");
})
</script>
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(document).on("pagebeforecreate", "#page_home", function () {
$( "#leftpanel" ).panel({ dismissible: true });
$( "#leftpanel").panel("close");
});
}
</script>
<script>
$(document).on("pagecreate", "#page_home", function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
setTimeout(function(){
$('#leftpanel').panel("close");
}, 500);
}
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_home", function () {
$( "#leftpanel" ).panel({ dismissible: false });
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_download", function () {
$( ".leftpanel" ).panel( "option", "dismissible", false );
$('#leftpanel').panel("open");
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_kodi", function () {
$( "#leftpanel" ).panel( "option", "dismissible", false );
$('#leftpanel').panel("open");
});
</script>
<script>
/* Left & Right swipe gestures to open panels*/
$(document).on("pagecreate", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(document).on("swipeleft swiperight", function(e) {
if ($(".ui-page-active").jqmData("panel") !== "open") {
if (e.type === "swipeleft") {
$("#rightpanel").panel("open");
} else if (e.type === "swiperight") {
$("#leftpanel").panel("open");
}
}
});
}
});
</script>
我已将所有这些都放在了我的 HTML 文件中。
HTML 面板：
<div style="margin-top: 0px; background-color: #212120;" class="customlist panel-open" data-role="panel" data-position="left" data-dismissible="" data-display="overlay" data-theme="none" id="leftpanel">
<ul data-role="listview" data-inset="false">
MY CONTENT HERE
</ul>
</div>
data-dismissible="" 我这样说是因为当你用 JS 手动设置它时，这就是有效的，或者我已经阅读了。如果我将它设置为 false 或 true，它就不起作用。
基本上，我在这里尝试做的始终是让面板在更大的屏幕上打开，并关闭选项以在更小的屏幕上滑动打开它。到目前为止，这有效。我遇到的问题是，当我从首页转到另一个页面时，面板无法按预期运行并关闭，但如果我从另一个页面转到首页则不会。
PS：我还把面板放在我的两个页面之间，如下所示：
page_home
-- 面板 -- 一些弹出窗口
page_download
page_kodi
提前感谢您提供的所有帮助，并为文字墙感到抱歉。
【问题讨论】：
-
您应该只在
$(document).ready中创建一次面板。顺便说一句，要了解您正在使用的页面事件，请阅读以下内容：jQuery Mobile “Page” Events – What, Why, Where, When & How? -
您好，感谢您的回复。我现在已经阅读了它，但仍然没有让它工作。当我更改页面时，面板会自动消失，即使我更改页面，我也试图让它保持打开状态。作为各种侧面导航栏。我尝试使用 pagecreate，因为我在您链接的网站的提示中看到了这一点，但它无法正常运行。有什么想法吗？
-
...另一种选择是只使用一个页面并 ajax 内容。这是一个小提琴，它显示了一个带有外部面板和响应内容的页面：jsfiddle.net/e6Cnn/38
-
再次感谢，但我很抱歉。我真的无法让它工作。你在说什么我应该把所有这些合而为一？所以： 这是正确的吗？
-
我已经尝试了所有我能想到的方法，并在过去 3 小时内查看了您的所有解决方案，但它仍然不会在页面更改时自动显示。这可能是 JQM 的错误吗？
标签： javascript jquery html jquery-mobile