如何在表格单元格（td）上使用bootstrap的下拉列表？

Question

我有一个简单的html表格包含bootstrap：

[...]
<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 ？

Answer 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;
}