テーブルセル（td）でブートストラップのドロップダウンを使用するには？

Question

私は、単純な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に耳を傾ける必要がありますか？

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