表行下拉到谷歌并在任何地方点击后隐藏

时间:2016-06-10 09:47:48

标签: jquery drop-down-menu

我正在尝试为表格中的每一行创建一个可切换的操作下拉列表,无法理解如何切换,或者在用户点击屏幕中的其他位置时让它消失。

以下是我的代码

<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

});

1 个答案:

答案 0 :(得分:0)

可能是this resolves您的问题