点击时，JS没有带我到正确的href链接它被分配给

Question

我有一个下拉菜单，我希望用户能够点击打开，点击打开后，他们应该能够点击一个变量或变量框内的任何地方，并把他们到一个新的链接，而不仅仅是文本。然而，目前，当我在打开后单击下拉框中的文本时，它不会带我到任何链接，当我在框内单击文本时，它会带我到一个未定义的链接。我以前使用过这个JS函数，它已经工作了，我不确定我在这里做错了什么。

我特别检查了这个代码块是否可以通过在地表下引入一个虚拟的html页面和沉淀作为变量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 class="dropdown-container-var">
<p2><a3 href="#" >Surface and Precipitation</a3></p2>
<ul class="dropdown-list-var">
<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 class="dropdown-container-var">
<p2><a3 href="#" >Upper-Air: Dynamics</a3></p2>
<ul class="dropdown-list-var">
<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 class="dropdown-container-var">
<p2><a3 href="#" >Upper-Air: Temperature,Wind</a3></p2>
<ul class="dropdown-list-var">
<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>

Answer 1

将JavaScript代码第27行更改为

window.location.href = e.target.attributes.href.value;

您在该点捕获的元素(例如target)是a2本身。在其上运行查询选择器，在其后代中搜索a2标记，但找不到任何内容。Btw，一些友好的建议:避免使用非标准标签，如a2，并使用debugger语句来查看您手头有什么。

Answer 2

请使用此javascript代码。试着使用e.a rtarget . 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 class="dropdown-container-var">
<p2><a3 href="#" >Surface and Precipitation</a3></p2>
<ul class="dropdown-list-var">
<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 class="dropdown-container-var">
<p2><a3 href="#" >Upper-Air: Dynamics</a3></p2>
<ul class="dropdown-list-var">
<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 class="dropdown-container-var">
<p2><a3 href="#" >Upper-Air: Temperature,Wind</a3></p2>
<ul class="dropdown-list-var">
<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>

Answer 3

看起来问题可能出在

这一行

window.location.href = e.target.querySelector("a2").href;

您应该调用getAttribute来获取a2元素的href属性的值，而不是调用querySelector。另外，a2元素应该是li元素的子元素，因此应该使用

e.target.querySelector("a2").getAttribute("href");

。

window.location.href = e.target.querySelector("a2").href

应:

window.location.href = e.target.querySelector("a2").getAttribute("href")