CSS 在 DevExtreme 中切换子菜单

Question

我想在单击 link 时在我的移动应用程序中切换子菜单，但单击时子菜单不会显示在内容 div 的顶部。代码很简单，但我不知道哪里出了问题：

HTML:

<div class="home-view"  data-options="dxContent : { targetPlaceholder: 'content' } " >
    <div class="side-menu">
        <ul>
            <li><a id="menu-link" data-bind="click: showMenu" href="#">Offres</a></li>
        </ul>
    </div>
    <div class="side-sub-menu">
        <ul>
            <li>Offres</li>
        </ul>
    </div>
    <div class="view-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>
</div>

CSS:

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%;
}

JS:

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

结果（点击前）：http://i.stack.imgur.com/ETqTQ.png
结果（点击后）：http://i.stack.imgur.com/QV6vM.png

PS：我尝试制作一个 fiddle 但它在 DevExtreme 模拟器中无法正常工作。

Answer 1

你的问题应该只有css才能解决。这是一个定位问题。为您的侧边菜单设置一个固定宽度，然后为您的子菜单设置一个固定宽度，并将其左侧值设置为侧边菜单的宽度。然后使用 z-indexes 在您的视图内容之上显示子菜单：

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;
}

CSS 在 DevExtreme 中切换子菜单

CSS Toggling a submenu in DevExtreme

html

javascript

css

jquery

devextreme