Закрытие выпадающего меню только при щелчке мышью вне выпадающего списка

Question

У меня есть выпадающее меню начальной загрузки:

<div class="dropdown>
   <a class="dropdown-toggle" href="#" id="menu1" data-toggle="dropdown"><img src="@imagePath" class="img-circle dropbtn" alt="Product" style="width:30px;height:30px;" /></a>

  <ul class="dropdown-menu" id="productDD" role="menu" aria-labelledby="menu1"></ul>
</div>

Теперь ul загружает продукты при загрузке страницы через ajax call. Проблема в том, что когда я нажимаю на любой продукт в раскрывающемся списке, раскрывающийся список закрывается Но я хочу закрыть выпадающий список только при щелчке мышью в любом месте за пределами ul

Answer 1

Попробуйте что-то вроде этого:

$(document).click(function(e) {
  // get the clicked element
  $clicked = $(e.currentTarget);
  // if the clicked element is not a descendent of the dropdown
  if ($clicked.closest('.dropdown').length === 0) {
    // close the dropdown
    $('.dropdown').removeClass('open');
  }
});

Answer 2

просто поместите этот скрипт в ваш код

<script>
    $(document).click(function() {
    $(".dropdown").removeClass('open');
});
</script>