1

我和这篇文章有同样的问题。但该解决方案不适用于我的项目。

我使用 ASP.NET MVC4 和 JQM。我在头部加载了一个 JS 文件。我有一个这样的菜单：

<a href="#left-panel" id="link-menu" class="ui-panel-animate"></a>
<div data-role="panel" id="left-panel" data-display="push">
  <ul data-role="listview">
   ...
  </ul>
</div>

我的链接菜单 CSS 类：

#link-menu
{
  top: 3px;
  position: absolute;
  background: url("images/icons-36-white.png"); 
}

这是一个图像，它的位置是绝对的。因此，当面板打开时，我必须添加：

.Menu-decalage {
  -webkit-transform: translate3d(272px,0,0);
  -moz-transform: translate3d(272px,0,0);
  transform: translate3d(272px,0,0);    
}

在我的 JS 文件中，我添加了：

$(document).on('pagebeforeshow', function () {
  $("#left-panel").panel({
    beforeopen: function (event, ui) {
        $("#link-menu").addClass("Menu-decalage");
    },
    beforeclose: function (event, ui) {
        $("#link-menu").removeClass("Menu-decalage");
    }
});

它在加载第一页时起作用，而不是在导航之后。我知道代码是在第一页上执行的，我尝试过：

$.mobile.activePage.find('#left-panel').panel();

但它不起作用。

我试图改变

$(document).on('pagebeforeshow', function () {

到

$(document).on('pageinit', function () {

但 activePage 未定义。

所以如果有人可以给我一个解决方案：谢谢

4

2 回答 2

0

});您的部分中缺少一个$(document).on('pagebeforeshow'...。

如果那不能解决问题，请发布更多您的 html，这可能会有所帮助。

更新

当 JS 运行一次（初始加载）时，通常这意味着您的 JS 代码不是页面的一部分。尝试将您的绑定移动pagebeforeshow到您想要绑定的页面内。所以您将拥有：

<div id="page1" data-role="page">
  <div data-role="header">
  </div>

  <script>
  ... on pagebeforeshow method ...
  </script>

  <div data-role="content">
  </div>
</div>
于 2013-07-31T15:19:26.133 回答
-1

我找到了一个解决方案，方法是在 html 中添加具有相对位置的图像并删除链接的背景图像。

感谢您的帮助

于 2013-08-05T08:31:31.123 回答