增强 jQuery Mobile 菜单系统

Question

@Omar 打造了酷炫的 ios 风格菜单系统here

我需要一些修改。

1) 当新的子菜单滑入时，上一个菜单应该滑出。

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

Answer 1

您需要在打开另一个菜单时关闭 open 菜单。在打开任一菜单的 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