Bootstrap 是一个流行的前端框架，它提供了各种组件和工具，可用于构建美观且功能强大的 Web 应用程序。在使用 Bootstrap 时，您可能会遇到需要在 HTML 元素之间进行导航或交互的情况。通过使用 data-* 属性，您可以轻松地将这些元素关联起来。其中，data-target 属性是一种常见的方式，它允许您指定一个 ID，以便在点击或悬停等事件中导航到该元素。
但是，如果您不想在 DOM 中使用 ID，该怎么办呢？在本文中，我们将介绍如何使用相邻节点选择器（Adjacent Sibling Selector）来解决这个问题。
相邻节点选择器
相邻节点选择器是 CSS 的一种选择器，它可以选择紧接在另一个元素后面的元素。它使用加号符号（+）表示。例如，以下代码将选择所有 class 为 "example" 的元素后面的第一个段落：
-------- - - - -- ---- -- -
在上面的示例中，"+" 符号表示选择紧接着前面选择器所选元素后面的元素。要注意的是，这只会选择下一个相邻的元素，而不是所有匹配的元素。
在 Bootstrap 中使用相邻节点选择器
现在，让我们看一下如何在 Bootstrap 中使用相邻节点选择器来指定 data-target 属性，以引用 DOM 中相邻节点而不使用 ID。以下是一个示例：
---- -------------
---- --------------------
--- -------------
------- ---------- --------- ------------- ----------------------
--------------------- - ---------- --------------------
--------------------------------
----
---------
-----
------
---- ----------------------
---- -----------------------
------在上面的示例中，我们将 data-target 属性设置为“.example + .collapse”。这意味着当按钮被单击时，它将搜索 DOM 中紧随 class 为 "example" 的元素后面的第一个 class 为 "collapse" 的元素，并将其收缩或展开。
请注意，如果您想选择多个相邻的元素，则可以将 "+" 符号之间的选择器链进行扩展。例如，以下代码将选择紧接着 class 为 "example" 的元素后面的两个段落：
-------- - - - - - -- ---- -- -
总结
通过使用相邻节点选择器，您可以在 Bootstrap 中指定 data-target 属性，引用 DOM 中相邻节点而不使用 ID。这种技术可以帮助您编写干净、易于维护的代码，并避免在 DOM 中添加不必要的 ID 属性。我们希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29214