CSS在DevExtreme中切換子菜單

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
結果（點擊後）：PS：我試圖做一個小提琴，但它不像DevExtreme模擬器那樣工作。

Answer 1

你應該只能通過CSS來解決你的問題。這是一個定位問題。在你的側邊菜單中設置一個固定的寬度，然後爲你的子菜單設置一個固定的寬度，並將其左側的值設置爲你的側邊菜單中的widt。然後使用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; 
}