当我将鼠标悬停在另一行上时，如何在表格中隐藏引导下拉菜单？

Question

我有一个表格，其中每一行的下拉列表中都有选项。当我点击选项时，下拉菜单打开（应用显示类）。当我在下拉菜单打开时将鼠标悬停在其他行上时，它会消失（尽管显示类保留），当我将鼠标悬停在现有行上时，它会再次出现。

我想做以下两件事中的任何一件：

1. 即使我将鼠标悬停在该特定行之外，下拉菜单也不应该消失。

2. 一旦我将鼠标悬停在行外，下拉菜单就会关闭。

我试过这段代码但失败了：

$('#people-area-list tr').on('mouseleave', function () {

    var x = $(this).children('.action-btns .dropdown');

    x.removeClass('show');

});

HTML 是：

<div class="dropdown">

    <a href="#" id="edit-submenu" data-toggle="dropdown">Options</a>

    <div class="dropdown-menu" aria-labelledby="edit-submenu">

        <a onclick="managePermission()" href="javascript:void(0);">Manage permissions</a>

        <a href="#">Reset password</a>

        <a href="#" onclick="deleteModal(@userId,' @fullName ')">Delete User</a>

    </div>

</div>

Answer 1

&nbsp; &nbsp;<tr class="leave">&nbsp; &nbsp; &nbsp;<td>...<td>&nbsp;&nbsp; &nbsp; &nbsp;<td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="#" data-toggle="dropdown">Options</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="dropdown-menu" aria-labelledby="edit-submenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a onclick="managePermission()" href="javascript:void(0);">Manage permissions</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Reset password</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="deleteModal(@userId,' @fullName ')">Delete User</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </td>&nbsp;</tr>JS<script>&nbsp; $(document).ready(function(){&nbsp; &nbsp; $(".leave").on("mouseleave", function () {&nbsp; &nbsp; &nbsp; &nbsp; $(this).find(".dropdown").removeClass("show");&nbsp; &nbsp; &nbsp; &nbsp; $(this).find(".dropdown-menu").removeClass("show");&nbsp; &nbsp; });&nbsp; });</script>