Question

将Bootstrap升级到4.2.1版本后出现问题。在此版本中，当我在id="#12"中使用accordion时，它不起作用。在以前的版本中，它可以与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>

Answer 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标识符。您还可以采取一些技巧来逃脱，但是除非有必要，否则请使用其他选择器

Answer 2

ID应该以字母开头。

通过Google开发工具：

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

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

还有一个有用的问题可以在这里检查：What are valid values for the id attribute in HTML?。

如果您需要使用数字，请尝试执行以下操作：

#d12 or #d-12

Answer 3

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

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

代替：

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

所以每次生成 id 时，无论 id 是什么类型，它前面都已经有一个字符。

如果ID为数字，则Bootstrap手风琴无法正常工作

3 个答案: