1

我是这个社区的新手，首先很抱歉我来自委内瑞拉的英语不好，我的问题如下。我正在开发一个带有标题菜单动画的 jquery 移动应用程序，该项目是一个单页 HTML 文档，包含许多“页面”容器，在第一次加载时工作正常，但是当使用 $.mobile.changePage() 更改页面时菜单工作错误。

标题 html

<div data-role="header" data-position="fixed" style="text-align:center;">
   <div id="navigation">
      <div class="home" style="height:100%">
         <div class="cls" style="height:100%;"></div>
         <div class="cls2" style="height:100%;"></div>
         <div class="cls3" style="height:100%;"></div>
         <div class="cls4" style="height:100%;"></div>
         <div class="cnf" style="height:100%;"></div>
      </div>
   </div>
    <h1 id="title" style="padding:4px;"></h1>

   <div id="navigation2">
      <div class="home2" style="height:100%">
         <div class="home2" style="height:100%">
            <div class="img" style="height:95%;"></div>
            <div class="cls" style="height:95%;"></div>
            <div class="cls2" style="height:95%;"></div>
            <div class="cls3" style="height:95%;"></div>
            <div class="cls4" style="height:90%;"></div>
         </div>
      </div>
   </div>
</div>

javascript

 $('div.cnf').bind('click',function(e) {
    e.preventDefault();
    if (click === null) {          
        $('div.home').stop(true, true).animate({
            'marginLeft' : '+=80%'
        }, 1000);
        click = 1;

    }else{            
        $('div.home').stop(true, true).animate({
            'marginLeft' : '-=80%'
        }, 1000);
        resetmenu();
    }

});

$('div.home2').toggle(function(e) {
    e.preventDefault();
    $(this).stop(true, true).animate({
        'marginLeft' : '-=80%'
    }, 1000);

}, function() {       
    $(this).stop(true, true).animate({
       'marginLeft' : '+=80%' 
    }, 1000);

});
4

1 回答 1

1

使用 $.mobile.changePage() 时，请了解您实际上并没有“更改”到该页面，并且您没有处理 head 标记中的任何脚本。在 JQM 中，当您使用 changePage() 时，JQM 会从指定文件中的第一个data-role="page"开始获取所有 HTML （绕过 head 部分）。

这里的链接非常好： Jquery Mobile - $.mobile.changepage not loading external .JS files

希望有帮助

~红色

于 2013-01-12T00:49:52.480 回答