clicando no conteúdo suspenso, suspenso ficando oculto
Código HTML para menus suspensos:
<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 Código para mostrar o menu suspenso:
$('.dropDownLink').on('click', function () {
$('.dropDown').hide();
$(this).children($('.dropDown')).show();
});
jQuery para ocultar menus suspensos ao clicar em menus suspensos externos:
$(document).on('click', function (e) {
if(!$('.dropDownLink').is(e.target) && !$('.dropDown').is(e.target)) {
$('.dropDown').hide();
}
});
Ao clicar em outro documento que não seja o menu suspenso, está funcionando bem, mas ao clicar no conteúdo dentro do menu suspenso, oculta o menu suspenso pai. Existem também alguns conteúdos de formulário no menu suspenso, como campo de texto de entrada, caixas de seleção e links. O menu suspenso não deve ocultar os cliques nesses elementos dentro do menu suspenso.
Por favor me ajude com isso. Desde já, obrigado.