与菜单的父元素重叠的子元素

Question

我试图为一个移动项目制作一个窗口盲效果菜单。效果很简单，具体如下：

1. 单击菜单图标，条形图到顶部，菜单下垂。
2. 当选择某一项时，菜单以窗口盲方式滚动，内容以相同的方式显示。

下面是我认为是罪魁祸首的CSS片段：

#menu_wrapper ul {
display: none;
top: 100px;
right: 0;
bottom: auto;
left: auto;
position: absolute;
height: auto;
width: 100vw;
margin: 0;
padding: 1em;
color: #f5f5f5;
font-size: 2.5rem;
background-color: rgba(0, 0, 0, 0.8); }

#menu_wrapper ul a {
color: #f5f5f5; }

#menu_wrapper ul a:hover {
color: #00a8b0;
text-decoration: none; }

#menu_wrapper address {
margin-top: 1.5rem;
font-size: 1.5rem; }


#menu_wrapper .item-content {
display: none;
top: 50%;
right: 0;
bottom: auto;
left: auto;
position: absolute;
height: auto;
width: 100vw;
margin: 0;
padding: 1em;
z-index: 3; }

问题是“项内容”停留在父"menu_wrapper“中。这可能与"menu_wrapper“绝对定位这一事实有关，但我仍然对这些特殊情况感到困难。它也可能是我的jQuery代码，但我怀疑它(建议仍然欢迎)！

我已经为您提供了一个指向jsFiddle的链接：http://jsfiddle.net/smpte11/5s6qxntt/

谢谢。

编辑:我想要精确的效果，我正在努力实现。当单击菜单时，它会下降，当我关闭菜单时，它会上升，直到它以一种窗口盲的方式消失。现在，当我单击菜单的一个项目时，菜单会滚动到消失(就像关闭它的时候)，然后内容就会下降，显示它而不是菜单。当然，当你进入前一个层次时，同样的效果也会发生。

Answer 1

我不确定这是否是您想要的样子--我刚刚通过以下更改调整了您的小提琴：

CSS：

 #menu_wrapper .item-content {
   position:relative;
 }

因此，每个子菜单显示在子菜单标题旁边。

jQuery：

function showPageContentPhone() {
 menu.on('click', 'li:not(:last-child) a', function () {
    console.log("click");
    var that = $(this);
    that.next('div').slideToggle();

  });
}

以前，主导航在每次单击子菜单时都会向上滑动，现在子菜单只是作为子菜单运行(但之前的效果可能是预期的)。