My dropdown menu with form elements hides when anything outside of it is clicked, but unexpectedly also closes when I click inside the element. This makes it difficult to complete a form.
Below is the function causing this behavior:
$(function(){
$('#loginAcc').click( function(event){
event.stopPropagation();
//show
$('#auth-menu').css('display', 'block');
});
$(document).click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});
})
The issue seems to be related to the use of .toggle(). #loginAcc is a horizontal list item that triggers the dropdown menu (#auth-menu) to show or hide. The current functionality requires clicking on #loginAcc again to close the menu, which is not ideal.
I would like the #auth-menu to only close when #loginAcc is clicked again, or if the user clicks anywhere outside of the menu.
If anyone has any suggestions on how to achieve this, it would be greatly appreciated. Thank you.