使用querySelector引用div

Question

我想在事件点击中引用一个按钮，以访问dropdown Contentdiv上的a标记，并将显示设置为block。我该怎么做？

const dropdownBtn = document.querySelectorAll('.dropdownBtn')
for (const button of dropdownBtn) {
button.addEventListener('click', (e) => {
const links = document.querySelectorAll(`.${button} + .dropdownContent a`)
links.forEach(link => link.style.display = 'block')
})
}

<div class="menu">
<div class=dropdown>
<button class='dropdownBtn'>Button1</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
<div class=dropdown>
<button class='dropdownBtn'>Button2</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
</div>

谢谢你的帮助。

Answer 1

看看这段代码，我想你是想选择下一个同级

const links = document.querySelectorAll(`.${button} + .dropdownContent a`)

您可以使用而不是使用+

const links = button.nextElementSibling.querySelectorAll(".dropdownContent a")

例如，不创建额外的links变量：

const dropdownBtn = document.querySelectorAll('.dropdownBtn')
for (const button of dropdownBtn) {
button.addEventListener('click', (e) => {
button.nextElementSibling.querySelectorAll(".dropdownContent a")
.forEach(link => link.style.display = 'block')
})
}

<div class="menu">
<div class=dropdown>
<button class='dropdownBtn'>Button1</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
<div class=dropdown>
<button class='dropdownBtn'>Button2</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
</div>

Answer 2

如果我理解正确，这可以通过获取当前按钮的父元素，然后只查询其子元素来实现。

我是这样做的：

const dropdownBtn = document.querySelectorAll('.dropdownBtn')
for (const button of dropdownBtn) {
button.addEventListener('click', (e) => {
const links = button.parentElement.querySelectorAll(`.dropdownContent a`)
links.forEach(link => link.style.display = 'block')
})
}

<div class="menu">
<div class=dropdown>
<button class='dropdownBtn'>Button1</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
<div class=dropdown>
<button class='dropdownBtn'>Button2</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
</div>

Answer 3

在外部下拉容器上循环，然后可以查询该容器内的元素。

切换类而非内联样式的示例：

const dropdown = document.querySelectorAll('.dropdown');
dropdown.forEach(el => {
el.querySelector('.dropdownBtn').addEventListener('click', function() {
el.querySelectorAll('.dropdownContent a').forEach(link => link.classList.toggle('active'))
});
});

a.active {
color: red
}

<div class="menu">
<div class=dropdown>
<button class='dropdownBtn'>Button1</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
<div class=dropdown>
<button class='dropdownBtn'>Button2</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
</div>

Answer 4

这将仅为按钮的下一个同级.dropdownContent将a元素设置为block。

document.querySelectorAll('.dropdownBtn').forEach((btn) => {
btn.addEventListener('click', (evt) => {
const dropdownDiv = evt.target.nextElementSibling;
for (let i = 0; i < dropdownDiv.children.length; i++) {
dropdownDiv.children[i].style.display = 'block';
}
});
});

document.querySelectorAll('.dropdownBtn').forEach((btn) => {
btn.addEventListener('click', (evt) => {
const dropdownDiv = evt.target.nextElementSibling;
for (let i = 0; i < dropdownDiv.children.length; i++) {
dropdownDiv.children[i].style.display = 'block';
}
});
});

<div class="menu">
<div class=dropdown>
<button class='dropdownBtn'>Button1</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
<div class=dropdown>
<button class='dropdownBtn'>Button2</button>
<div class="dropdownContent">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
</div>
</div>
<div>
<ul id="test">
</ul>
</div>