javascript - 我怎样才能让这个下拉列表总是显示在父 div 之外？

Question

我有一个非常具体的 HTML/CSS 和/或 JS 问题。我在 this fiddle here 创建了一个示例显示问题。

我有一个可滚动的 div，它是一个表的父级:

<div style="overflow-y: auto; max-height: 300px;">
  <table style="width: 100%;">

...我的表格行之一包含一个带下拉菜单的按钮:

<td>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

我的问题是，当您单击按钮打开下拉菜单时，它是在可滚动区域内打开的，因此如果您不向下滚动，您将看不到下拉菜单。但是，我想要按钮在可滚动区域之外打开这个下拉菜单。有没有办法做到这一点，使下拉菜单可见，同时让 UI 仍然可缩放(意思是，如果我调整窗口大小，它仍应在按钮下方显示下拉菜单)？此外，我有一个要求保持可滚动区域的原样，这意味着当内容太多时，可滚动区域需要在那里(这是设计要求)。

Answer 1

我认为没有办法让你的子容器ul.dropdown-menu“忽略”它的父容器的overflow: hidden...如果你需要保持 HTML 结构不变，我认为唯一的选择是从 .dropdown 中删除 position: relative 并设置 的绝对顶部和左侧位置.dropdown-menu 在按钮点击时使用 JavaScript(例如使用按钮的位置)。