增强jQuery移动菜单系统 [英] Enhancing a jQuery Mobile Menu System

问题描述

@Omar已创建了酷炫的ios样式菜单系统此处

@Omar has created a cool ios style menu system here

我需要一些修改。

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

1) When the new submenu slides in, the previous menu should slide out.

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

2) The new submenu should inherit the same background color as the previous menu

推荐答案

您需要在打开另一个菜单时关闭打开菜单。在中点击处理程序，打开任一菜单，添加以下内容：

You need to close open menu while opening the other one. Inside click handler which opens either menu, add the following:

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

关于背景颜色，想要 ui-sub-panel-open 和另一种颜色（如果需要）到 ui-sub-panel-close 。

Regarding background color, add any color you want to ui-sub-panel-open and another color (if you want) to 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

And don't forget to remove the below 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 事件。

Then you should return submenu to its' original position, by listening to transitionend events.

$(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移动菜单系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！