带有数据表的 Bootstrap 下拉菜单不起作用

Posted 2023-05-07

【中文标题】带有数据表的 Bootstrap 下拉菜单不起作用

【英文标题】：Bootstrap's dropdown with Datatables not working

【发布时间】：2014-11-27 03:40:51

【问题描述】：

你能帮我吗？我有 Bootstrap 的下拉按钮到数据表的末尾，但是当我点击它时它不起作用，菜单没有显示

<div class="btn-group dropdown">
        <button class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="">Edit</a></li>
          <li><a href="">Delete</a></li>
          <li class="divider"></li>
          <li><a href="">Separated link</a></li>
        </ul>
</div>

【问题讨论】：

你是否在你的脚本中初始化 dorpdown，比如 'dropdown()'？

不，我只是调用 Datatable 方法，该方法创建 $.ajax 调用数据库并将此 html 附加到数据表的最后一列

在 html 'data-toggle="drop down"' 中添加数据属性以下拉或使用脚本初始化下拉 '.dropdown()' 在您的情况下更好地使用数据属性。希望这可以帮助。可以参考 Bootstap 文档getbootstrap.com/javascript/#dropdowns-usage

【参考方案1】：

我加了

$('body .dropdown-toggle').dropdown(); 

对我有用。

【讨论】：

在寻找 DataTables 和 Bootstrap 下拉菜单无法正常运行的原因之后，我遇到了这个简单快捷的解决方案，它为我解决了问题！非常感谢。

【参考方案2】：

根据他们的网站，引导下拉菜单的正确格式是：

<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

这还取决于您的页面中包含的 bootstrap.js 文件，因此请确保您拥有此文件。

来源：

http://getbootstrap.com/javascript/#dropdowns

【讨论】：

事实上，它可以立即使用这个建议，所以这应该被接受的答案 - 见小提琴 -> jsfiddle.net/nbmhb44k删除了我自己的答案。这都是关于data-toggle="dropdown"

这对我有用，开始的 div 下拉类是关键。