javascript - 增强 jQuery Mobile 菜单系统

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-面板关闭。

.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