JQuery数据表隐藏引导下拉菜单

Posted 2023-05-07

【中文标题】JQuery数据表隐藏引导下拉菜单

【英文标题】：JQuery datatable hiding bootstrap dropdown

【发布时间】：2015-05-06 01:14:58

【问题描述】：

当 jquery 数据表的 scrollX 属性设置为 true 时，我遇到了隐藏引导下拉菜单的问题。请参阅下面的屏幕截图。任何想法如何在将 scrollX 设置为 true 的同时解决此问题？

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 时显示引导下拉菜单

当 scrollX = true 时引导下拉菜单隐藏

【问题讨论】：

理想情况下，我希望它的行为与将 scrollX 设置为 false 的菜单相同

多个，每行一个

【参考方案1】：

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

Demo

如果您希望菜单在不调整表格大小的情况下工作，则需要将其标记移到表格外。您可以使用绝对定位来获得相同的位置。

【讨论】：

这非常接近 - 这确实解决了菜单被隐藏的问题。唯一的副作用是它最终扩展了适合菜单的表格行。有什么想法可以解决这个问题？