在现代网页开发中，动态显示或隐藏内容是常见的需求，例如展开/折叠商品详情、显示更多信息等。当页面上存在多个这类交互元素时，如何编写一套通用且高效的javascript逻辑来管理它们，而非为每个元素创建单独的函数，是开发者面临的挑战。
理解DOM操作的常见误区
许多开发者在尝试解决此类问题时，可能会直观地尝试使用closest()方法来查找关联元素。例如，在点击按钮后，试图通过elem.closest('div')来获取按钮后的第一个div。
考虑以下HTML结构：
Shop name
Shop Address · Shop number
Opening soon
以及对应的JavaScript尝试：
立即学习“Java免费学习笔记（深入）”；
function showShop(id) {
const elem = document.getElementById(id);
// 错误：closest()向上遍历DOM树，寻找最近的祖先div，而不是兄弟元素或子元素
const div = elem.closest('div');
div.classList.toggle('hidden');
}这里的问题在于，closest()方法是用于查找当前元素或其祖先元素中，第一个匹配指定CSS选择器的元素。在上述结构中，按钮button#banff的祖先元素中可能存在其他div，或者根本没有div作为其直接祖先，因此closest('div')无法正确获取到按钮 之后 的那个div。我们需要的是能够向下或横向遍历DOM树的方法。
解决方案一：通过ID建立显式关联
一种直接且易于理解的方法是，为每个按钮及其关联的div建立一个明确的ID命名约定。这样，当按钮被点击时，可以通过其自身的ID推断出目标div的ID，从而精确地定位到要操作的元素。
HTML结构
为按钮和对应的div分配具有关联性的ID。例如，如果按钮ID是button-1，那么其关联的div可以命名为shop-button-1。
Shop name
Shop Address · Shop number
Shop name 2
Shop Address 2 · Shop number 2
JavaScript逻辑
在JavaScript函数中，通过传入的按钮ID来动态构建目标div的ID，然后获取并操作该div。
