如果ID为数字，则Bootstrap手风琴无法正常工作 [英] Bootstrap accordion not working if ID is number

问题描述

将Bootstrap升级到4.2.1版本后出现问题.在此版本中，当我在accordion中使用id="#12"时，它不起作用.在以前的版本中，它可以与id="#12"一起使用.有什么想法吗?

I have problems after upgrading Bootstrap to 4.2.1 version. In this version when I use id="#12" in accordion it's not working. In previous versions it worked fine with id="#12". Any ideas?

  <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>

推荐答案

在HTML 5中，以数字开头的ID是有效的，但是CSS不允许前导数字.

While in HTML 5, it is valid to start an id with a numeric, CSS doesn't allow leading numerics.

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

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

内部，Bootstrap 4正在使用

Internally, Bootstrap 4 is using

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选择器

To lookup your element. querySelector requires a valid CSS selector

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

A DOMString containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SYNTAX_ERR exception is thrown.

我建议仅使用有效的CSS标识符.您还可以采取一些技巧来逃脱，但除非必须这样做，否则只需使用其他选择器即可.

I'd recommend just using a valid CSS identifier. There's also tricks you can do to escape, but unless if you have to, just use a different selector

这篇关于如果ID为数字，则Bootstrap手风琴无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！