How to hide bootstrap dropdown inside a table when I hover over another row?

user_13962340 0
Viewed 163

I have a table inside which on each row I have options inside a dropdown. When I click on the options, the dropdown opens (show class applied). When I hover on other rows while the dropdown is open, it disappears (although the show class stays) and when I hover back on the existing row, it appears again.

I wish to do either of these 2 things:

  1. The dropdown should not disappear even if I hover out of that particular row.
  2. The dropdown should close once I hover out of the row.

I tried this code but failed:

$('#people-area-list tr').on('mouseleave', function () {
    var x = $(this).children('.action-btns .dropdown');
    x.removeClass('show');
});

HTML is:

<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>
bootstrap-4 jquery javascript
1 Answers
   <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>
user_134996390
Related