Question

我一直在我的jquery手机上处理多级菜单或子菜单，而且一般来说，第三部分jquery插件已经深深搞乱了我与position:fixed页脚和滚动相关的CSS。

我看了plugin's here，几乎所有这些都让我感到困惑。我希望我可以用现有的jquery移动框架中的this example

重新创建seen here。

Answer 1

左侧面板和子菜单：

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

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

子菜单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>

<强> 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;
}

<强> 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 ^（1）

更新1

右侧面板和子菜单：

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

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

Demo ^（1）

^{（1）在Safari上测试 - iPhone 5 iOS 7.0.6＆amp; iPad 2 iOS 7.1}

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

1 个答案:

左侧面板和子菜单：

更新1

右侧面板和子菜单：