如何在表格单元格（td）上使用引导下拉菜单？

【问题标题】：How to use bootstrap's dropdown on table cell (td)?如何在表格单元格（td）上使用引导下拉菜单？
【发布时间】：2017-05-28 12:32:59
【问题描述】：

我有一个使用引导程序布局的简单 html 表格：

[...]
<td data-toggle="dropdown" class="tag dropdown-toggle">
<span class="number">Employee1</span>
<ul class="dropdown-menu"><li><a href="#">to nightshift</a></li>
</ul>
</td>
[...]

但是当我点击单元格时，下拉菜单没有出现。如何让下拉菜单看起来像在这里完成？

https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

我需要手动收听td.click吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap dropdown

【解决方案1】：

我认为这将对您的问题有所帮助。您错过了父下拉类并在您的样式表中添加以下 css。

html

<tr class="dropdown">
    <td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">John <span class="caret"></span>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>

css

.open ul.dropdown-menu {
    display: block;
}

【讨论】：