我试图在点击一个选项时关闭一个HTML下拉列表。该列表使用CSS悬停显示。当光标移开时，它会消失，但当点击一个选项时不会。
这里有一个小提琴显示的问题：https://jsfiddle.net/evL5d8aq/
我需要的可点击元素是一个DIV或一个表格单元格。小提琴显示都表现出同样的问题。
单击事件触发OK。我已经尝试了几种方法来关闭列表，但都不能令人满意地工作，如我在JS中添加的注解所示。
我用的是Bootstrap 4
HTML：

<table class="table table-bordered">
<tbody>
  <tr>
    <td class="text-center dropdown custom-dropdown" style="background-color: red">JavaScript
      <ul class="dropdown-menu custom-dropdown-list mt-0">
        <li class="text-center" style="background-color: lightgreen;">HTML</li>
        <li class="text-center" style="background-color: yellow;">CSS</li>
        <li class="text-center" style="background-color: lightblue;">C#</li>
      </ul>
    </td>                    
  </tr>
</tbody>
</table>
<div style="background-color: red" class="text-center dropdown custom-dropdown">
JavaScript
<ul class="dropdown-menu custom-dropdown-list mt-0">
        <li class="text-center" style="background-color: lightgreen;">HTML</li>
        <li class="text-center" style="background-color: yellow;">CSS</li>
        <li class="text-center" style="background-color: lightblue;">C#</li>
      </ul>
</div>

JS：

$('.custom-dropdown').on('click', function(e) {

    console.log("You selected: " + e.target.innerText)

    // Works, but then can't invoke dropdown
    //$('.dropdown-menu').css({'display': 'none'});

    // Hides the TD or Div as well as the DDL
    //$(this).hide();

    // Does nothing
    $(".custom-dropdown-list").removeClass("open");  

});