fix close lang menu click outside

This commit is contained in:
Jonas Heinrich 2020-05-30 11:27:23 +02:00
parent 9989413cd5
commit d4b709dfc5
2 changed files with 19 additions and 8 deletions

View file

@ -204,6 +204,10 @@ header.sticky-header .header-lang-small {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.63); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.63);
} }
header.sticky-header .header-lang-small .dropdown .dropdown-content {
top: 54px;
}
.header-lang-small .dropdown .dropdown-content li:not(.active) { .header-lang-small .dropdown .dropdown-content li:not(.active) {
display: block; display: block;
padding: 5px 0; padding: 5px 0;

View file

@ -1,7 +1,9 @@
document.getElementsByClassName("header-lang-small")[0].addEventListener("click", function(){ document.addEventListener("click", function(){
var langSelector = document.getElementsByClassName("header-lang-small")[0];
var dropdown = document.getElementById("dropdown"); var dropdown = document.getElementById("dropdown");
var dropdownIcon = document.querySelector('.header-lang-small .icon'); var dropdownIcon = document.querySelector('.header-lang-small .icon');
console.log(dropdownIcon); var isClickInside = langSelector.contains(event.target);
if (isClickInside) {
if (dropdown.style.display === "block") { if (dropdown.style.display === "block") {
dropdown.style.display = "none"; dropdown.style.display = "none";
dropdownIcon.classList.toggle('active'); dropdownIcon.classList.toggle('active');
@ -9,4 +11,9 @@ document.getElementsByClassName("header-lang-small")[0].addEventListener("click"
dropdown.style.display = "block"; dropdown.style.display = "block";
dropdownIcon.classList.toggle('active'); dropdownIcon.classList.toggle('active');
} }
} else {
dropdown.style.display = "none";
dropdownIcon.classList.remove('active');
};
}); });