JQuery Datatable 如何隐藏 Bootstrap 下拉菜单？

Question

我遇到了一个问题，当jquery datatable的scrollX属性设置为true时，会隐藏bootstrap下拉菜单。如下面的截图所示。有什么想法可以在保留scrollX属性为真的情况下解决这个问题吗？

dataTable = $('#table').DataTable({
        "scrollX" : true
})

<div class="dropdown">
  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="">Edit</a></li>
          <li><a href="">Delete</a></li>
          <li class="divider"></li>
          <li><a href="">Separated link</a></li>

  </ul>

示例： http://jsfiddle.net/dhL40g04/

当scrollX=false时，显示Bootstrap下拉菜单。

当scrollX=true时，隐藏Bootstrap下拉菜单。

- angrycrab

---

理想情况下，我希望它的行为与滚动X设置为false的菜单相同。 - angrycrab

多个，每行一个 - angrycrab

Answer 1

#table .dropdown-menu {
    position: relative;
    float: none;
    width: 160px;
}

演示

如果你想让菜单在不改变表格大小的情况下工作，你需要将它的标记移出表格。你可以使用绝对定位来获得相同的位置。

- isherwood

---

这非常接近 - 这确实解决了菜单被隐藏的问题。唯一的副作用是它会扩展表格行以适应菜单周围。有什么想法可以避免这种情况吗？ - angrycrab