HTML-код для выпадающих:

<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 для отображения выпадающего списка:

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

JQuery, чтобы скрыть выпадающие при нажатии вне выпадающего:

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

При щелчке по документу, отличному от раскрывающегося списка, он работает нормально, но при нажатии на содержимое внутри раскрывающегося списка скрывается его родительский раскрывающийся список. В выпадающем списке есть также некоторые формы содержимого, такие как поле ввода текста, флажки и ссылки. Выпадающий список не должен скрывать нажатие на эти элементы внутри раскрывающегося списка.

Пожалуйста, помогите мне с этим. Заранее спасибо.