Question

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

我需要做一些修改。

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");
  }
});

<强> Demo

增强jQuery Mobile菜单系统

1 个答案:

更新