Question

我一直在试用JQM 1.4和新的外部面板功能，但由于某种原因，外部面板正在加载为页面（http://i.imgur.com/vsIH6ro.png），而不是应该滑出。例如，在页面主页上，单击该链接将转到主页#navigation_panel并显示如上图所示。

面板代码位于最终页面下方。

小组代码：

    <!---NAVIGATION PANEL-->
<div data-role="panel" id="navigation_panel">
    <a href="#home"><i class="fa fa-home"></i>Home</a>
    <a href="#account"><i class="fa fa-user"></i>My Account</a>
    <a href="#howitworks"><i class="fa fa-cog"></i>How It Works</a>
    <a href="#pricesanddelivery"><i class="fa fa-usd"></i>Prices and Delivery Times</a>
    <a href="#locations"><i class="fa fa-map-marker"></i>Service Locations</a>
    <a href="#bagsvipadvantage"><i class="fa fa-check"></i>Bags VIP Advantage</a>
    <a href="#faq"><i class="fa fa-question"></i>FAQ</a>
    <a href="https://news.maketraveleasier.com"><i class="fa fa-list-alt"></i>News</a>
    <a href="#contactus"><i class="fa fa-envelope-o"></i>Contact Us</a>
    <a href="#aboutus"><i class="fa fa-info"></i>About Bags Inc.</a>
</div><!-- /panel -->
<!--/NAVIGATION PANEL-->

示例链接：

<a href="#navigation_panel"><i class="fa fa-bars header_icon"></i></a>

JS初始化：

 $( document ).on( "mobileinit", function() {
     console.log("Initializing panel...")
     $("#navigation_panel").panel();
 });

正在访问控制台消息，并且没有抛出任何错误。我也尝试了以下解决方案：

$(function () {
 $("[data-role=panel]").panel().enhanceWithin();
});

找到（jquery mobile external panel not taking on styling）

以及更改.panel（）的位置，删除.panel（），并将面板代码放在其他位置。

我应该注意，我们的CMS默认为jQuery 1.7，而JQM 1.4是内联的。版本不匹配会成为一个问题吗？

提前感谢您提供的任何帮助!!

jquery移动外部面板加载为页面

0 个答案: