1


单击链接时，我想在我的移动应用程序中切换子菜单，但是单击子菜单时不会显示在内容 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 模拟器中那样工作。

4

1 回答 1

2

您应该只能通过 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;
}
于 2015-03-02T10:05:49.970 回答