I am currently working on setting up a dropdown menu that can be closed both by clicking outside the opened div and by clicking the button or image that opens the div.
Image with onclick function:
<img onclick="hide()" id="menu" src="....">The dropdown list that should be opened and closed is defined with the class display:none:
<ul id="dropdown" class="dropdown-breadcrumb">
<li>...</li>
</ul>This is what I have come up with so far:
function hide() {
var x = document.getElementById("dropdown");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}Now, when I try to add a function that closes the dropdown when the user clicks outside of it:
window.addEventListener('mouseup', function(event){
var dropd = document.getElementById('dropdown');
if(event.target != dropd && event.target.parentNode != dropd){
dropd.style.display = 'none';
}
});I am facing an issue with the dropdown staying open because the onclick function is triggered. Can anyone assist me in combining these functions? Thank you!