Javascript CSS在DevExtreme中切换子菜单

我想在单击链接时切换移动应用程序中的子菜单，但单击时，子菜单不会显示在内容分区的顶部。代码很简单，但我无法找出错误：

HTML:

JS:

结果（单击前）：
结果（单击后）：

---

PS：我试着做一把小提琴，但它没有在DevExtreme模拟器中工作。

你应该只能通过css来解决你的问题。这是一个定位问题。将固定宽度设置为侧菜单，然后将固定宽度设置为子菜单，并将其左值设置为侧菜单的宽度。然后使用z索引在视图内容顶部显示子菜单：

li {
    list-style-type: none;
}
.home-view {
    position:relative;
}
.home-view p {
    padding: 5px;
}

#menu-link {
    text-decoration: none;
}

.side-sub-menu {
    position:absolute;
    top: 0;
    left: 15%;
    background-color: orange;
    width: 15%;
    height: 100%;
    visibility: hidden;
    z-index:11;
}

.side-menu {
    position:absolute;
    top: 0;
    left: 0;
    background-color: green;
    width: 15%;
    height: 100%;
}

.view-content {
    position:absolute;
    left: 15%;
    top: 0;
    width: 85%;
    height: 100%;
    z-index:10;
}

---

是否希望子菜单直接粘贴到菜单上显示？首先，考虑将一个真正的宽度（不仅仅是最大宽度）添加到你的边菜单中，并且位置：相对于你的家庭视图<>代码>位置：相对< /代码>不会改变任何东西，我移到最大宽度，并设置<代码>左：11% < /代码>到.Sub子菜单类。这让我很接近，所以我认为这是一个定位问题，你能告诉我如何将视图内容设置在侧菜单div旁边，以及如何使侧子菜单div显示在视图内容div的顶部。谢谢你z-index做到了这一点，我不知道它是如何从我的脑海中消失的。谢谢你，罗宾：）

li {
    list-style-type: none;
}
.home-view p {
    padding: 5px;
}

#menu-link {
    text-decoration: none;
}

.side-sub-menu {
    position:absolute;
    top: 0;
    left: 30%;
    background-color: orange;
    max-width: 30%;
    height: 100%;
    visibility: hidden;
}

.side-menu {
    position:absolute;
    top: 0;
    left: 0;
    background-color: green;
    max-width: 30%;
    height: 100%;
}

.view-content {
    position:absolute;
    margin-left: 5%;
    right: 0;
    top: 0;
    max-width: 70%;
    height: 100%;
}

var viewModel = {
    showMenu: function () {
        $(".side-sub-menu").css("visibility", "visible");
    }
};
return viewModel;

li {
    list-style-type: none;
}
.home-view {
    position:relative;
}
.home-view p {
    padding: 5px;
}

#menu-link {
    text-decoration: none;
}

.side-sub-menu {
    position:absolute;
    top: 0;
    left: 15%;
    background-color: orange;
    width: 15%;
    height: 100%;
    visibility: hidden;
    z-index:11;
}

.side-menu {
    position:absolute;
    top: 0;
    left: 0;
    background-color: green;
    width: 15%;
    height: 100%;
}

.view-content {
    position:absolute;
    left: 15%;
    top: 0;
    width: 85%;
    height: 100%;
    z-index:10;
}