增强jQuery Mobile菜单系统

Question

@Omar在这里创建了一个很酷的ios风格菜单系统

我需要一些修改.

1)当新子菜单滑入时,上一个菜单应该滑出.

2)新子菜单应继承与上一菜单相同的背景颜色

Answer 1

您需要在打开另一个菜单时关闭打开的菜单.click打开任一菜单的内部处理程序,添加以下内容:

$(".ui-sub-panel-open")
    .addClass('ui-sub-panel-close ui-sub-panel-animate')
    .removeClass("ui-sub-panel-open");

这将关闭打开的菜单,然后滑动下一个; 完整的代码.

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

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

关于background颜色,添加您想要的任何颜色ui-sub-panel-open和另一种颜色(如果您愿意)ui-sub-panel-close.

.ui-sub-panel-open {
  -moz-transform: translate3d(-17em, 0, 0);
  -webkit-transform: translate3d(-17em, 0, 0);
  transform: translate3d(-17em, 0, 0);
  background: lightblue;
}

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

并且不要忘记删除下面的CSS

#submenu1 {
  background: color;
}

#submenu2 {
  background: color;
}

更新

要将关闭面板向左滑动,请.ui-sub-panel-close按如下方式进行修改.

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

然后你应该通过听事件将子菜单返回到它的原始位置transitionend.

$(document).on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "#submenu1, #submenu2", function () {
  var position = $(this).offset().left;
  if (position < 0) {
    $(this).removeClass("ui-sub-panel-close ui-sub-panel-animate");
  }
});

演示