如何设置和删除两个细节元素的属性

Question

我有一个导航栏，带有使用<details>标签的下拉菜单

sum.addEventListener("mouseenter", (event) => {
details.setAttribute("open", "open");
});
sum.addEventListener("mouseleave", (event) => {
details.removeAttribute("open", "open");
});

当鼠标悬停在details标记上时，我想添加和删除一个属性。它似乎对第一个下拉列表有效，但对第二个下拉列表无效。请帮忙！

Answer 1

Document方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，则返回null。MDN-

下面，您将选择嵌套在其中的第一个details和summary。

let details = document.querySelector("details");
let sum = document.querySelector("summary");

您可以改为使用document.querySelectorAll。

let details = document.querySelectorAll("details");
let sum = document.querySelectorAll("summary");
sum.forEach((sum, index) => {
sum.addEventListener("mouseenter", (event) => {
details[index].setAttribute("open", "open");
console.log(details[index]);
});
sum.addEventListener("mouseleave", (event) => {
details[index].removeAttribute("open", "open");
console.log(details[index]);
});
});