I have a dropdown menu that I want users to be able to click open, after it's clicked open they should be able to click a variable or anywhere within the variable box and take them to a new link not just the text. However, currently, when I click the text within the dropdown after it's opened, it is not taking me to any link and when I am clicking outside the text within the box, it is taking me to an undefined link. I have used this JS function before and it has worked and I'm not sure what I am doing wrong here.
I specifically was checking if this code block was working by introducing a dummy html page under surface and precipitation as the variable 2m-Temperature
document.querySelectorAll(".dropdown-container-var ul li").forEach(d => {
d.addEventListener("click", e => {
const dropdown = e.target.closest(".dropdown-container-var ").querySelector("ul")
if(dropdown) {
dropdown.style.display = "block"
_ElementBlur(e.target, () => {
dropdown.style.display = "none"
})
}
})
})
document.querySelectorAll(".dropdown-container-var").forEach(d => {
d.addEventListener("click", e => {
const dropdown = e.target.closest(".dropdown-container-var ").querySelector("ul")
if(dropdown) {
dropdown.style.display = "block"
_ElementBlur(e.target, () => {
dropdown.style.display = "none"
})
}
})
})
document.querySelectorAll(".dropdown-container-var ul li").forEach(listItem => {
listItem.addEventListener("click", e => {
window.location.href = e.target.querySelector("a2").href
})
})
// Functions for getting a 'blur' event on an element
const _ElementBlur = (el, f = false) => {
const ac = new AbortController()
document.body.addEventListener("click", _CheckBlur(el, f, ac), { signal: ac.signal })
}
const _CheckBlur = (el, f = false, ac) => {
return e => {
if(!document.elementsFromPoint(e.clientX, e.clientY).filter(efp => efp == el).length || !document.elementsFromPoint(e.clientX, e.clientY).length) {
if(f && typeof(f) == "function") f()
ac.abort()
}
}
} a3 {
color: white;
text-decoration: none;/* Change this to the desired color */
transition: background-color 0.2s;
}
a2 {
color: black;
text-decoration: none;/* Change this to the desired color */
transition: background-color 0.2s;
}
.dropdown-container-var {
position: relative; /* create a positioning context for the list items */
background-color: #333;
color: white;
text-decoration: none;
width: 600px;
text-align: center;
transition: background-color 0.2s;
cursor: pointer;
}
.dropdown-container-var:hover { /* create a positioning context for the list items */
background-color: #525252;
transition: background-color 0.2s;
}
.dropdown-list-var {
position: relative; /* position the list items absolutely */
display: none; /* hide the list by default */
list-style-type: none; /* remove the bullet points for the list items */
padding: 0; /* remove the padding for the list */
left: 0; /* position the list items at the left edge of the list */
transition: border 0.2s; /* add a transition effect for the border */
background-color: #b0b0b0;
color: black;
text-decoration: none;
width: 600px;
text-align: center;
transition: background-color 0.2s;
cursor: pointer;
}
.dropdown-list-var li:hover {
background-color: #04AA6D;
transition: background-color 0.2s;}/* change the background color of the list items
to green when they are hovered over */
}
.dropdown-list-var li {
color: black; /* set the color of the list items to black */
text-align: center;
transition: background-color 0.2s;
}
p2 {
margin: 0;
}
.dropdown-list-var {
margin: 0; /* <-- add this to the existing CSS code*/
/* the rest */
}
optgroup {
font-weight: bold;
color: black;
width: 520px;
cursor: default;
} <div >
<p2><a3 href="#" >Surface and Precipitation</a3></p2>
<ul >
<ul class = "optgroup">
<optgroup label="Surface">
</ul>
<li><a2 href="dummylink.html">2m Temperature</a2></li>
<li><a2 href="#">2m Dewpoint</a2></li>
<li><a2 href="#">Mean Sea Level Pressure</a2></li>
<li><a2 href="#">10m Wind</a2></li>
<ul class = "optgroup">
<optgroup label="Precipitation">
</ul>
<li><a2 vale="" href="#">6-hr Precipitation Type/Rate</a2></li>
<li><a2 href="#">Categorical Precipitation Type</a2></li>
<li><a2 href="#">6-hr Precipitation</a2></li>
<li><a2 href="#">24-hr Precipitation</a2></li>
<li><a2 href="#">Total Precipitation</a2></li>
<ul class = "optgroup">
<optgroup label="Winter">
</ul>
<li><a2 href="#">Total Snowfall</a2></li>
</ul>
</div>
<div >
<p2><a3 href="#" >Upper-Air: Dynamics</a3></p2>
<ul >
<ul class = "optgroup">
<optgroup label="Vorticity">
</ul>
<li><a2 href="#">500 hPa Height,Wind,Vorticity</a2></li>
<li><a2 href="#">700 hPa Height,Wind,Vorticity</a2></li>
<li><a2 href="#">850 hPa Height,Wind,Vorticity</a2></li>
<ul class = "optgroup">
<optgroup label="Lift">
</ul>
<li><a2 href="#">700 hPa Frontogenesis/Temperature Advection</a2></li>
<li><a2 href="#">700 hPa Omega</a2></li>
<li><a2 href="#">850 hPa Frontogenesis/Temperature Advection</a2></li>
<li><a2 href="#">850 hPa Omegan</a2></li>
</ul>
</div>
<div >
<p2><a3 href="#" >Upper-Air: Temperature,Wind</a3></p2>
<ul >
<ul class = "optgroup">
<optgroup label="Temperature">
</ul>
<li><a2 href="#">700 hPa Temperature, Height, Wind</a2></li>
<li><a2 href="#">850 hPa Temperature, Height, Wind</a2></li>
<li><a2 href="#">925 hPa Temperature, Height, Wind</a2></li>
<ul class = "optgroup">
<optgroup label="Wind">
</ul>
<li><a2 href="#">250 hPa Height, Wind</a2></li>
<li><a2 href="#">850 hPa Height, Wind</a2></li>
<ul class = "optgroup">
<optgroup label="Anomaly">
</ul>
<li><a2 href="#">500 hPa Height Anomaly</a2></li>
</ul>
</div>CodePudding user response：
Please use this javascript code. try to use e.target.getAttribute("href")
document.querySelectorAll(".dropdown-container-var ul li").forEach(d => {
d.addEventListener("click", e => {
const dropdown = e.target.closest(".dropdown-container-var ").querySelector("ul")
if(dropdown) {
dropdown.style.display = "block"
_ElementBlur(e.target, () => {
dropdown.style.display = "none"
})
}
})
})
document.querySelectorAll(".dropdown-container-var").forEach(d => {
d.addEventListener("click", e => {
const dropdown = e.target.closest(".dropdown-container-var ").querySelector("ul")
if(dropdown) {
dropdown.style.display = "block"
_ElementBlur(e.target, () => {
dropdown.style.display = "none"
})
}
})
})
document.querySelectorAll(".dropdown-container-var ul li").forEach(listItem => {
listItem.addEventListener("click", e => {
var url = e.target.getAttribute("href")
window.open(url, '_blank');
})
})
// Functions for getting a 'blur' event on an element
const _ElementBlur = (el, f = false) => {
const ac = new AbortController()
document.body.addEventListener("click", _CheckBlur(el, f, ac), { signal: ac.signal })
}
const _CheckBlur = (el, f = false, ac) => {
return e => {
if(!document.elementsFromPoint(e.clientX, e.clientY).filter(efp => efp == el).length || !document.elementsFromPoint(e.clientX, e.clientY).length) {
if(f && typeof(f) == "function") f()
ac.abort()
}
}
} a3 {
color: white;
text-decoration: none;/* Change this to the desired color */
transition: background-color 0.2s;
}
a2 {
color: black;
text-decoration: none;/* Change this to the desired color */
transition: background-color 0.2s;
}
.dropdown-container-var {
position: relative; /* create a positioning context for the list items */
background-color: #333;
color: white;
text-decoration: none;
width: 600px;
text-align: center;
transition: background-color 0.2s;
cursor: pointer;
}
.dropdown-container-var:hover { /* create a positioning context for the list items */
background-color: #525252;
transition: background-color 0.2s;
}
.dropdown-list-var {
position: relative; /* position the list items absolutely */
display: none; /* hide the list by default */
list-style-type: none; /* remove the bullet points for the list items */
padding: 0; /* remove the padding for the list */
left: 0; /* position the list items at the left edge of the list */
transition: border 0.2s; /* add a transition effect for the border */
background-color: #b0b0b0;
color: black;
text-decoration: none;
width: 600px;
text-align: center;
transition: background-color 0.2s;
cursor: pointer;
}
.dropdown-list-var li:hover {
background-color: #04AA6D;
transition: background-color 0.2s;}/* change the background color of the list items
to green when they are hovered over */
}
.dropdown-list-var li {
color: black; /* set the color of the list items to black */
text-align: center;
transition: background-color 0.2s;
}
p2 {
margin: 0;
}
.dropdown-list-var {
margin: 0; /* <-- add this to the existing CSS code*/
/* the rest */
}
optgroup {
font-weight: bold;
color: black;
width: 520px;
cursor: default;
}<div >
<p2><a3 href="#" >Surface and Precipitation</a3></p2>
<ul >
<ul class = "optgroup">
<optgroup label="Surface">
</ul>
<li><a2 href="https://dummylink.html">2m Temperature</a2></li>
<li><a2 href="#">2m Dewpoint</a2></li>
<li><a2 href="#">Mean Sea Level Pressure</a2></li>
<li><a2 href="#">10m Wind</a2></li>
<ul class = "optgroup">
<optgroup label="Precipitation">
</ul>
<li><a2 vale="" href="#">6-hr Precipitation Type/Rate</a2></li>
<li><a2 href="#">Categorical Precipitation Type</a2></li>
<li><a2 href="#">6-hr Precipitation</a2></li>
<li><a2 href="#">24-hr Precipitation</a2></li>
<li><a2 href="#">Total Precipitation</a2></li>
<ul class = "optgroup">
<optgroup label="Winter">
</ul>
<li><a2 href="#">Total Snowfall</a2></li>
</ul>
</div>
<div >
<p2><a3 href="#" >Upper-Air: Dynamics</a3></p2>
<ul >
<ul class = "optgroup">
<optgroup label="Vorticity">
</ul>
<li><a2 href="#">500 hPa Height,Wind,Vorticity</a2></li>
<li><a2 href="#">700 hPa Height,Wind,Vorticity</a2></li>
<li><a2 href="#">850 hPa Height,Wind,Vorticity</a2></li>
<ul class = "optgroup">
<optgroup label="Lift">
</ul>
<li><a2 href="#">700 hPa Frontogenesis/Temperature Advection</a2></li>
<li><a2 href="#">700 hPa Omega</a2></li>
<li><a2 href="#">850 hPa Frontogenesis/Temperature Advection</a2></li>
<li><a2 href="#">850 hPa Omegan</a2></li>
</ul>
</div>
<div >
<p2><a3 href="#" >Upper-Air: Temperature,Wind</a3></p2>
<ul >
<ul class = "optgroup">
<optgroup label="Temperature">
</ul>
<li><a2 href="#">700 hPa Temperature, Height, Wind</a2></li>
<li><a2 href="#">850 hPa Temperature, Height, Wind</a2></li>
<li><a2 href="#">925 hPa Temperature, Height, Wind</a2></li>
<ul class = "optgroup">
<optgroup label="Wind">
</ul>
<li><a2 href="#">250 hPa Height, Wind</a2></li>
<li><a2 href="#">850 hPa Height, Wind</a2></li>
<ul class = "optgroup">
<optgroup label="Anomaly">
</ul>
<li><a2 href="#">500 hPa Height Anomaly</a2></li>
</ul>
</div>CodePudding user response：
Change line 27 of your JavaScript code to
window.location.href = e.target.attributes.href.value;
The element you are catching at that point (e.target) is a2 itself. Running query selector on it searches for an a2 tag in its descendants and cannot find anything. Btw, some friendly suggestions: avoid using non-standard tags such as a2 and make use of debugger statement to see what you have at hand.
CodePudding user response：
It looks like the issue might be with the line window.location.href = e.target.querySelector("a2").href.
Instead of calling querySelector, you should be calling getAttribute to get the value of the href attribute of the a2 element. Also, the a2 element should be a child of the li element that you are adding the click event listener to, so you should be using e.target.querySelector("a2").getAttribute("href") instead.
window.location.href = e.target.querySelector("a2").href
should be:
window.location.href = e.target.querySelector("a2").getAttribute("href")