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

Question

我有一个表格，其中每一行的下拉列表中都有选项。当我点击选项时，下拉菜单打开（应用显示类）。当我在下拉菜单打开时将鼠标悬停在其他行上时，它会消失（尽管显示类保留），当我将鼠标悬停在现有行上时，它会再次出现。我想做以下两件事中的任何一件：即使我将鼠标悬停在该特定行之外，下拉菜单也不应该消失。一旦我将鼠标悬停在行外，下拉菜单就会关闭。我试过这段代码但失败了：$('#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

   <tr class="leave">

     <td>...<td> 

     <td>

        <div class="dropdown">

           <a href="#" 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>

    </td>

 </tr>

JS

<script>

  $(document).ready(function(){

    $(".leave").on("mouseleave", function () {

        $(this).find(".dropdown").removeClass("show");

        $(this).find(".dropdown-menu").removeClass("show");

    });

  });

</script>