可滾動元素中的下拉菜單

Question

我試圖實現一個菜單，其子菜單顯示在下拉菜單中。

菜單由標題，菜單元素和頁腳組成。爲此，我在我的父元素上使用了一個簡單的display: flex，其中兩個固定大小的頁眉和頁腳，其餘爲flex: 1。

爲了管理內容中的滾動，我還必須在內容容器上設置一個overflow: auto。這會導致下拉菜單顯示在X軸滾動中。

我不知道該怎麼做才能解決這個問題，我試過玩position: fixed,as mentioned in this question，但是當我嘗試滾動時它不起作用。

Here的JSFiddle嘗試使用固定位置失敗。

當前HTML模板：

<div id="app"> 
    <div class="menu"> 
    <div class="menu-header"> 
     <h1> 
     Header 
     </h1> 
    </div> 
    <div class="menu-content"> 
     <ul> 
     <li class="element" v-for="(element, index) in elements" :key="index" 
      @mouseenter="element.childrenVisible = true" 
      @mouseleave="element.childrenVisible = false"> 
      <h2> 
      {{ element.title }} 
      </h2> 
      <div class="children-wrapper" v-if="element.childrenVisible && element.children && element.children.length"> 
      <ul class="children"> 
       <li v-for="(child, childIndex) in element.children" :key="childIndex"> 
       <h3> 
        {{ child.title }} 
       </h3> 
       </li> 
      </ul> 
      </div> 
     </li> 
     </ul> 
    </div> 
    <div class="menu-footer"> 
     <p> 
     Footer.. 
     </p> 
    </div> 
    </div> 
</div> 

的JS只包含Vue公司的實例和一些測試數據，格式如下所示：

{ 
    title: '1', 
    childrenVisible: false, 
    children: [{ 
    title: '1.1', 
    }], 
}, 

而CSS（SASS）是這樣的：

.menu { 
    width: 100px; 
    max-height: 500px; 
    background-color: #0a6e89; 
    display: flex; 
    flex-direction: column; 

    .menu-header, .menu-footer { 
    height: 70px; 
    flex-shrink: 0; 
    background-color: #f9f8f2; 
    } 

    .menu-content { 
    flex: 1; 
    overflow: auto; 
    } 
} 

.menu-content { 
    ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    } 

    .element { 
    position: relative; 

    .children-wrapper { 
     position: absolute; 
     top: 0; 
     left: 100%; 
    } 

    .children { 
     position: fixed; 
     background-color: #f9f8f2; 
     border: 1px solid black; 
    } 
    } 
} 

Answer 1

如果在@mouseenter中使用方法而不是直接切換childrenVisible標誌，則會得到事件傳遞給方法的參數。

這有屏幕座標和對父元素的引用，它是子元素。

@mouseenter="mouseEnter" 

methods: { 
    mouseEnter (event) { 
    // adjust child position here 
    } 
}