如何对不同的按钮使用相同的功能来显示自己的下拉列表

Question

我将有多个下拉按钮来显示它们自己的下拉列表。在HTML中，下拉列表是按钮的同级元素。当我使用querySelector并单击任意按钮时，第一个按钮下拉列表会自然显示。我应该使用哪个选择器或任何其他解决方案？如何对每个按钮使用buttonDropdown((函数？提前谢谢。

<div class="container">
<button class="dropdown-button">
<!-- content -->
</button>
<div class="dropdown-button-list">
<!-- content -->
</div>
</div>
const dropdownButton = document.querySelector('.dropdown-button')
dropdownButton.addEventListener('click', showDropdown)
function showDropdown() {
document.querySelector.('dropdown-button-list').classList.add('show')
}

Answer 1

如果您在元素内部将它们关联在一起(就像我使用class='dropdown-group'一样(，那么您可以通过使用事件侦听器和轻松找到按钮的关联列表

evt.target.closest('.dropdown-group').querySelector('.dropdown-button-list')

window.addEventListener('load', () => {
document.querySelectorAll('.dropdown-button').forEach(el => el.addEventListener('click', e => buttonDropdown))
})
function buttonDropdown(evt) {
// button is evt.target
// associated dropdown is:
// evt.target.closest('.dropdown-group').querySelector('.dropdown-button-list')
}

<div class="container">
<div class='dropdown-group'>
<button class="dropdown-button">
<!-- content -->
</button>
<div class="dropdown-button-list">
<!-- content -->
</div>
</div>
</div>