HTML-Code für Dropdowns:

<ul>
 <li class="dropDownLink">
   Locality
   <ul class="dropDown">
     <li class="dropDown-row"><input tpye="text"></li>
   </ul>
 </li>
 <li class="dropDownLink">
   Locality
   <ul class="dropDown">
     <li class="dropDown-row"><input tpye="checkbox"> Option 1</li>
     <li class="dropDown-row"><input tpye="checkbox"> Option 2</li>
     <li class="dropDown-row"><input tpye="checkbox"> Option 3</li>
   </ul>
 </li>
</ul>

jquery Code zum Anzeigen des Dropdowns:

$('.dropDownLink').on('click', function () {
  $('.dropDown').hide();
  $(this).children($('.dropDown')).show();
});

jQuery, um Dropdowns beim Klicken außerhalb des Dropdowns auszublenden:

$(document).on('click', function (e) {
  if(!$('.dropDownLink').is(e.target) && !$('.dropDown').is(e.target)) {
    $('.dropDown').hide();
  }
});

Wenn Sie auf ein anderes Dokument als das Dropdown-Menü klicken, funktioniert es einwandfrei, aber wenn Sie auf den Inhalt im Dropdown-Menü klicken, wird das übergeordnete Dropdown-Menü ausgeblendet. Es gibt auch einige Formularinhalte in Dropdown-Listen wie Eingabetextfelder, Kontrollkästchen und Links. Dropdown sollte das Klicken auf diese Elemente in Dropdown nicht verbergen.

Bitte hilf mir dabei. Danke im Voraus