如果 ID 是数字，则 Bootstrap 手风琴不起作用答案

【问题标题】：Bootstrap accordion not working if ID is number如果 ID 是数字，则 Bootstrap 手风琴不起作用
【发布时间】：2019-06-16 02:32:29
【问题描述】：

将 Bootstrap 升级到 4.2.1 版本后出现问题。在这个版本中，当我在 accordion 中使用 id="#12" 时，它不起作用。在以前的版本中，它与id="#12" 一起工作得很好。有什么想法吗？

  <div id="accordion">
    <div class="card">
  <div class="card-header" id="headingOne">
     <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#12"
           aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
        </button>
     </h5>
  </div>
  <div id="12" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
     <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
        dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
        moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
        synth nesciunt you probably haven't heard of them accusamus labore
        sustainable VHS.
     </div>
  </div>

【问题讨论】：

让我们暂时忘记 Bootstrap。我并不感到惊讶的是，某些软件会在您的 ID 的实际名称中使用 # 时遇到问题。 # 符号保留用于定位 CSS 规则中的 ID，因此在您的情况下，您的 CSS 选择器将是 ##12，这是自找麻烦。我想说，如果到目前为止它对你有用，那么你已经很幸运了，继续使用这种命名方案只是在玩火。

标签： javascript html bootstrap-4

【解决方案1】：

虽然在 HTML 5 中，以数字开头的 id 是有效的，但 CSS 不允许以数字开头。

在 CSS 中，标识符（包括元素名称、类和 ID）选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或后面的连字符开头一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（参见下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

在内部，Bootstrap 4 正在使用

getSelectorFromElement(element) {
    let selector = element.getAttribute('data-target')

    if (!selector || selector === '#') {
      const hrefAttr = element.getAttribute('href')
      selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : ''
    }

    try {
      return document.querySelector(selector) ? selector : null
    } catch (err) {
      return null
    }
  }

查找您的元素。 querySelector 需要一个有效的 CSS 选择器

包含一个或多个要匹配的选择器的 DOMString。这个字符串必须是有效的 CSS 选择器字符串；如果不是，则为 SYNTAX_ERR 抛出异常。

我建议只使用有效的 CSS 标识符。您还可以采取一些技巧来逃避，但除非必须，否则只需使用不同的选择器

【讨论】：

【解决方案2】：

id 应该以字母开头。

来自谷歌开发工具：

来自https://developer.mozilla.org：

使用除 ASCII 字母、数字、'_'、'-' 和 '.' 以外的字符可能导致兼容性问题，因为它们在 HTML 4 中是不允许的。尽管在 HTML 5 中取消了此限制，但应以 ID 开头带有兼容性的字母。

这里也是一个有用的问题：What are valid values for the id attribute in HTML?。

如果您需要使用数字，请尝试这样做：

#d12 or #d-12

【讨论】：

【解决方案3】：

对于仍然遇到相同问题的任何人，我通过在列表中的每个 id 中添加一个字符 "#a" 来修复我的问题，如下所示：

id={"#a"+item.id}

而不是：

id={"#"+item.id} or id={item.id}

所以每次生成id，不管id是什么类型，前面都已经有一个字符了。

【讨论】：