Question

我想在单击链接时在我的移动应用程序中切换子菜单，但是当单击子菜单时，不会在内容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：我试图制作一个小提琴，但它在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中切换子菜单

1 个答案: