Jquery Mobile 1.4外部面板导航到其他页面后不打开答案

【问题标题】：Jquery Mobile 1.4 external panel do not open after navigating to other pageJquery Mobile 1.4外部面板导航到其他页面后不打开
【发布时间】：2014-02-12 08:16:42
【问题描述】：

我们正在使用 jquery mobile 和 apache cordova 开发一个移动应用程序。迁移到 jquery mobile 1.4.0 后，我们切换到外部面板，但面板出现问题。

http://jsfiddle.net/Q58MZ/3/有一个简单的问题示例

要重现问题，您必须： 1从菜单链接点击page1 2从菜单链接点击page2 3从菜单链接点击page1 4从菜单链接点击page2 5 点击内容中的“GO TO PAGE 1”链接

然后菜单不会打开它会添加它打开但不会打开的类。

这里是重现它的示例代码：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>  
    <script>
        $(document).ready(function() {
            $.mobile.defaultPageTransition = 'none';
            $("#mypanel").panel();
        });
        $(document).bind('panelbeforeopen', function(e, data) {
            console.log("before open");
        });
        $(document).bind('panelbeforeclose', function(e, data) {
            console.log("before close");
        });
    </script>
</head>
<body>
    <div data-role="panel" id="mypanel">
        <a href="#page1">page1</a>
        <br />
        <a href="#page2">page2</a>
    </div>
    <div data-role="page" id="page0">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 0</h1>
        </div>
        <div data-role="content"> 
            PAGE 0
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 1</h1>
        </div>
        <div data-role="content"> 
            PAGE 1
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 2</h1>
        </div>
        <div data-role="content"> 
            PAGE 2
            <a href="#page1">GO TO PAGE 1</a>
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
</body>

奇怪的是，当我浏览面板链接时，面板可以工作，但是当我点击不在面板中的链接时，它不会再打开了。我们也尝试了 $.mobile.changePage 和新的 :pagecontainer 但它是一样的。如果有人有类似的问题，请告诉我他是如何解决的。提前致谢。

【问题讨论】：

$.mobile.defaultPageTransition = 'none'; 导致它，尽管它不应该。页面在面板关闭之前发生变化，太奇怪了。
Tnaks 很多人，你拯救了一天。
Omar 有没有其他方法可以在不制动面板的情况下禁用动画？
这就是我正在做的事情。在更改视图之前强制关闭面板。
完成后能否发布解决方案？

标签： javascript jquery css jquery-mobile cordova-3

【解决方案1】：

Omar 是对的，$.mobile.defaultPageTransition = 'none'; 在我删除它时引起了问题，一切正常。

【讨论】：

我在使用 jquery-mobile-1.4.1 时遇到了完全相同的问题您是否有机会找到不需要启用动画的解决方案？谢谢。
目前我们还没有。尝试延迟添加自定义动画，我认为这可以解决问题。

【解决方案2】：

编辑：它已在 jquery mobile 1.4.2 中修复，请参阅 https://github.com/jquery/jquery-mobile/issues/6650

感谢 Cvetan 的提示，我能够使用自定义动画解决此问题：

.dummy.in{}
.dummy.out{}
.in{-webkit-animation-timing-function: ease-out;-webkit-animation-duration: 0ms;-moz-animation-timing-function: ease-out;-moz-animation-duration: 0ms;}
.out{-webkit-animation-timing-function: ease-in;-webkit-animation-duration: 5ms;-moz-animation-timing-function: ease-in;-moz-animation-duration: 5ms;}

然后我告诉 jqm 使用这个转换作为默认值：

$.mobile.defaultPageTransition = 'dummy';

就是这样，没有可见的页面过渡动画和完整的工作面板。

【讨论】：

【解决方案3】：

    <style type="text/css">
        .ui-panel-dismiss{display:none;}
        #p1, #p2{margin-left:17em;}
    </style>
    <script id="panel-init">
    $(function() {
        $( "body>[data-role='panel']" ).panel();
    });
            $(function(){$("#sidebar").panel();});
            $(document).on("pageshow", ":jqmData(role=page)", function() {you
                 $("#menu").panel("open");
    });
    </style>

【讨论】：

请不要评论您自己的答案。您的评论应该是答案的一部分