Reputation: 19
I have a dropdown list called "location" that needs to be closed when I clicked either to the navbar or header container. So far, I could not create the right condition to this case. I added my codepen for reference ..https://codepen.io/Joselle24/pen/dyNbzKY.... Need some help..Thank you so much
<nav id="mainnavbar" onload="myNaveffect()">
<!--3 divs-->
<div class="imageicon">
<a href="index.html"><img src="images/brandlogo2.png" alt="brandlogo" width="50px" height="50px"></a>
<a href="index.html" class="brandtitle" alt="brandtitle">Website Name</a>
</div>
<div class="navbarlink_uno">
<ul>
<li onclick="myLocfunction()" class="dropbtn">
<a target="_blank" style="padding-right: 2%;"> Locations</a>
<i class="arrow down"></i>
</li>
<div class="locdropdown_container">
<a href="#" class="">Restaurant</a>
<a href="navbarlinks/location/pbkbar/index_pbkbar.html">PBK Mini Bar</a>
</div>
<li class="menu"><a href="navbarlinks/menu/index_menu_seasonal.html" target="_self" class="links">Menu</a></li>
<li class="story"><a href="navbarlinks/story/index_story.html" target="_self" class="links">Story</a></li>
<li class="gallery"><a href="navbarlinks/gallery/index_gallery.html" target="_self" class="links">Gallery</a></li>
<li class="rewards"><a href="navbarlinks/rewards/index_rewards.html" target="_self" class="links">Rewards</a></li>
<li class="donate"><a href="navbarlinks/donate/index_donate.html" target="_self" class="links">Donate</a></li>
<li class="orderbtn"><a href="navbarlinks/order/index_order.html" target="_self">Order Pickup & Delivery</a></li>
</ul>
</div>
<div class="burgernavbar">
<i class="fa fa-bars"></i>
</div>
</nav>
<header>
</header>
Here is my JS
/* LOCATION FINDER TAB DROPDOWN BUTTON */
/* LOCATION FINDER TAB DROPDOWN BUTTON */
//function to add ".show" selector to display "locdropdown_container" mini-container*/
function myLocfunction() {
let xr = document.getElementsByClassName("locdropdown_container");
xr[0].classList.toggle("show"); //we use the toggle()method, because it make the "class" selector on/off
};
//function to remove ".show" selector */
function closelocbtn(){
const locbodyclose = document.getElementsByClassName("locdropdown_container");
locbodyclose[0].classList.remove("show"); //we use the remove()method, because it makes the toggle()method functionable after invoking the remove()method
};
//loop all parent container after nav container*/
let locx1, locx2;
// locx1 = document.querySelectorAll("nav, header"); //did not work
locx1 = document.querySelectorAll("nav ~ header"); //selects all element after nav container
for (locx2 = 0; locx2 < locx1.length; locx2++) { //loop all element
locx1[locx2].addEventListener("click", closelocbtn); //add an event listener and a function
};
//problem: need to invoke the function closelocbtn(), also to nav container with id#mainnavbar when the "classList.toogle" is active/on
/*Tested and did not work:*/
var demoss =document.querySelectorAll("#mainnavbar"); //added for selection
//var dddd = document.querySelectorAll(".show"); //store the class selector .show.
//or
var dddd = xr[0].classList.toggle("show");
if (dddd == true){ //what i when here is when the .show class is selected the var demoss will execute the closelocbtn().
demoss[0].addEventListener("click", closelocbtn); //added
};
Upvotes: 2
Views: 380
Reputation: 19
Hi found the answer to this task,,thank you ..
function myLocfunction(event){ document.querySelector(".locdropdown_container").classList.toggle("show");
myLocfunction.called = true;
event.stopPropagation();
};
function closelocbtn(){
if(myLocfunction.called){
document.querySelector(".locdropdown_container").classList.remove("show");
}
}
Upvotes: 0
Reputation: 4011
need to invoke the function closelocbtn(), also to nav container with id#mainnavbar when the "classList.toogle" is active/on
I changed the selector string you were using to select either the #mainnavbar
or the header
beside nav
let locx1 = [...document.querySelectorAll("#mainnavbar, nav ~ header")];
const myLocfunction = () => document.querySelector(".locdropdown_container").classList.toggle("show");
const closelocbtn = () => document.querySelector(".locdropdown_container").classList.remove("show");
locx1.forEach(elm => elm.addEventListener('click', closelocbtn));
Upvotes: 2