我正在尝试为表格中的每一行创建一个可切换的操作下拉列表,无法理解如何切换,或者在用户点击屏幕中的其他位置时让它消失。
以下是我的代码
<table>
<tr>
<td>Data</td>
<td><a data-id="1" href="#" class="dropdown"> Action Dropdown</a></td>
</tr>
<tr>
<td>Data</td>
<td><a data-id="2" href="#" class="dropdown"> Action Dropdown</a></td>
</tr>
<tr>
<td>Data</td>
<td><a data-id="3" href="#" class="dropdown"> Action Dropdown</a></td>
</tr>
</table>
<div class="dropdown-content">
<a href="/action1/id">View</a>
<a href="/action2/id">Edit</a>
<a href="/action3/id">Delete</a>
</div>
$('.dropdown).on('click', function(e) {
var $rowDropdownMenu = $('.dropdown-content');
var id = $(this).data('id');
$rowDropdownMenu = $rowDropdownMenu.html().replace(/id/g, id);
$(this).append($rowDropdownMenu);
// Need some here for toggle
});