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

问题描述

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

内部，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

我建议仅使用有效的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手风琴无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！