与父母的重叠的儿童元素菜单的

Question

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

1. 点击菜单图标，栏位于顶部，菜单下拉
2. 选择项目时，菜单＆＃34; roll＆＃34;窗帘时尚，内容以同样的方式出现

以下是我认为是罪魁祸首的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; }

问题在于＆＃34;项目内容＆＃34;留在父母＆＃34; menu_wrapper＆＃34;内。这可能与＆＃34; menu_wrapper＆＃34;的事实有关。绝对定位，但我仍然遇到这些特殊情况的麻烦。它也可能是我的jQuery代码，但我对此表示怀疑（建议仍受欢迎）！

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

感谢。

编辑：我想要确切地说明我想要实现的效果。当点击菜单时，它会下降，当我关闭菜单时，它会一直向上，直到它以盲目的方式消失。现在，当我点击菜单中的一个项目时，菜单会一直滚动直到它消失（就像关闭它时），然后内容会下降，显示它而不是菜单。当然，当你进入上一级时，会发生同样的效果。

Answer 1

我不确定这是否是您想要的样子 - 我刚刚调整了您的Fiddle并进行了以下更改：

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();

  });
}

以前每次点击子菜单项时主导航最初都会滑动，现在子菜单只是表现为子菜单（但可能是以前的效果）。