可滚动元素中的下拉菜单答案

【问题标题】：Dropdown menu in scrollable element可滚动元素中的下拉菜单
【发布时间】：2017-10-04 15:11:44
【问题描述】：

我正在尝试实现一个在下拉菜单中显示子菜单的菜单。

菜单由页眉、菜单元素和页脚组成。为此，我在父元素上使用了一个简单的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;
    } 
  }
}

【问题讨论】：

请包含您的代码，而不仅仅是指向它的链接（可能有一天会中断）

标签： javascript html css vue.js vuejs2

【解决方案1】：

如果你在@mouseenter 中使用一个方法而不是直接切换childrenVisible 标志，你会得到一个传递给方法参数的事件。

这有屏幕坐标和对父元素的引用，它是子元素。

@mouseenter="mouseEnter"

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

【讨论】：