javascript - 带有嵌套菜单/多级菜单的 JQuery Mobile 滑动面板

Question

我一直在我的 jquery 移动设备上开发多级菜单或子菜单，一般来说，第三部分 jquery 插件已经深深地扰乱了我与 position:fixed 页脚和滚动相关的 CSS。

我查看了 plugin's here几乎所有这些都让我的事情变得复杂。我希望我能重新创建 this example使用现有 jquery 移动框架的一些魔法作为 seen here

Answer 1

左侧面板和子菜单:

这里有一个快速的解决方案，只是为了给你一个想法。它有很大的改进空间，所以每当我做任何更改时，我都会更新这个答案。

根据需要创建子菜单，每个子菜单都有一个唯一 ID 和一个带有类 的关闭按钮。将子菜单放在主 jQM 面板中。

1. 子菜单 HTML 结构

   <div class='ui-sub-panel' id='submenu1'>
     <div class='ui-header' data-theme='a'>
       <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'>Close</a>
       <h1 class='ui-title'>Submenu1</h1>
     </div>
     <div class="ui-content">
       <!-- submenu contents here -->
     </div>
   </div>
   

2. CSS

   • 完整的高度、宽度和定位在页面之外。

     .ui-sub-panel {
       width: 100%;
       position: absolute;
       top: 0;
       left: -100%;
       min-height: 100%;
       max-height: none;
     }
     

   • 打开子菜单

     .ui-sub-panel-open {
       -moz-transform: translate3d(100%, 0, 0);
       -webkit-transform: translate3d(100%, 0, 0);
       transform: translate3d(100%, 0, 0);
     }
     

   • 关闭子菜单

     .ui-sub-panel-close{
       -moz-transform: translate3d(0, 0, 0);
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
     }
     

   • 动画关闭/打开

     .ui-sub-panel-animate {
       -webkit-transition: -webkit-transform 500ms ease;
       -moz-transition: -moz-transform 500ms ease;
       transition: transform 500ms ease;
     }
     

3. JS

   • 关闭主 jQM 面板后关闭所有子菜单

     $("#externalpanel").on("panelbeforeclose", function () {
       $('#submenu1, #submenu2')
           .addClass('ui-sub-panel-close ui-sub-panel-animate')
           .removeClass("ui-sub-panel-open");
     });
     

   • 打开第一个子菜单

     $('.sub1').on('click', function () {
       $('#submenu1')
           .addClass('ui-sub-panel-open ui-sub-panel-animate')
           .removeClass("ui-sub-panel-close");
     });
     

   • 打开第二个子菜单

     $('.sub2').on('click', function () {
       $('#submenu2')
          .addClass('ui-sub-panel-open ui-sub-panel-animate')
          .removeClass("ui-sub-panel-close");
     });
     

   • 关闭点击关闭按钮的子菜单

     $('.panel-close').on('click', function () {
       $(this)
          .closest(".ui-sub-panel")
          .addClass('ui-sub-panel-close ui-sub-panel-animate')
          .removeClass("ui-sub-panel-open");
     });
     

Demo ⁽¹⁾

---

Update 1

右侧面板和子菜单:

要将面板定位到右侧，请将 data-position="right" 属性添加到面板 div。此外，在 .ui-sub-panel 类中，将 left 更改为 right。

.ui-sub-panel {
   ...
   right: -100%;
   ...
}

Demo ⁽¹⁾

---

^{(1) 在 Safari 上测试 - iPhone 5 iOS 7.0.6 和 iPad 2 iOS 7.1}