Question

我使用的是jQuery Mobile 1.4.5。当我加载页面并立即单击移动菜单切换按钮时，将打开移动菜单。当我更改页面时，单击切换按钮时移动菜单不再打开。

我的导航如下：

<div data-role="header">
   <div data-role="navbar">
      <ul>
         <li><a href="{{ url('_my_page_1') }}">Page 1</a></li>
         <li><a href="{{ url('_my_page_2') }}">Page 2</a></li>
         <li><a href="{{ url('_my_page_3') }}">Page 3</a></li>
      </ul>

      <a id="toggle-mobile-menu" href="javascript:void(0)" data-role="none">
         Toggle mobile menu
      </a>

      <ul id="mobile-menu">
         // ...
      </ul>
   </div>
</div>
<div data-role="content"></div>

$(function () {
   $(document).on('click','#toggle-mobile-menu', function() {
            $('#mobile-menu').fadeToggle();
   });
});

我如何调整代码？

Answer 1

仅使用一个外部工具栏，并将标记放在页面正文中。这很容易：标记保持不变。不要忘记初始化工具栏：因为外部工具栏不在页面中，所以必须自己调用工具栏插件。

在$(document).ready中添加：

$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});

以下是有关此主题的jQuery Mobile文档：

http://demos.jquerymobile.com/1.4.5/toolbar-external/

这里是固定工具栏：

http://demos.jquerymobile.com/1.4.5/toolbar-fixed-external/

在jQuery Mobile中更改页面后，事件不再可用

1 个答案: