Bootstrap 4.6 折叠不切换（打开或关闭）答案

【问题标题】：Bootstrap 4.6 Collapse Not Toggling (Opening or Closing)Bootstrap 4.6 折叠不切换（打开或关闭）
【发布时间】：2021-10-24 01:28:34
【问题描述】：

见以下代码sn-p。单击按钮时，我的 Bootstrap 4.6 折叠内容未打开。

奇怪的是，当我在 JavaScript 控制台中运行 $("#30-50hp").collapse('show') 时，它确实打开了，那么为什么按钮不做同样的事情呢？

这是我关注的相关文档： https://getbootstrap.com/docs/4.6/components/collapse/

// The following makes it work!
// $("#30-50hp").collapse('show')

<!doctype html>
<html lang="en">

<head>
  <!-- Bootstrap v4.6 CSS-->
  <link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" 
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
  crossorigin="anonymous">
</head>

<body>
  <h4>Select Your Horsepower</h4>

  <p>
    <button 
      class="btn btn-secondary" 
      type="button" 
      data-toggle="collapse" 
      data-target="#30-50hp" 
      aria-expanded="false" 
      aria-controls="30-50hp">
      30-50 HP
    </button>
  </p>

  <div class="collapse" id="30-50hp">
    <div class="card card-body">
      <h4 class="card-title">30-50 HP Card Title</h4>
      <ul>
        <li>List item 1</li>
      </ul>
    </div>
  </div>

  <!-- JQuery 3.5.1 per Bootstrap 4.6 docs -->
  <script 
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
  crossorigin="anonymous"></script>
  
  <!-- Bootstrap v4.6 JavaScript -->
  <script 
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" 
crossorigin="anonymous"></script>

</body>

</html>

【问题讨论】：

标签： javascript html jquery twitter-bootstrap bootstrap-4

【解决方案1】：

不要以数字开头的 ID：

  <link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" 
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
  crossorigin="anonymous">

  <h4>Select Your Horsepower</h4>

  <p>
    <button 
      class="btn btn-secondary" 
      type="button" 
      data-toggle="collapse" 
      data-target="#x30-50hp" 
      aria-expanded="false" 
      aria-controls="30-50hp">
      30-50 HP
    </button>
  </p>

  <div class="collapse" id="x30-50hp">
    <div class="card card-body">
      <h4 class="card-title">30-50 HP Card Title</h4>
      <ul>
        <li>List item 1</li>
      </ul>
    </div>
  </div>

  <!-- JQuery 3.5.1 per Bootstrap 4.6 docs -->
  <script 
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
  crossorigin="anonymous"></script>
  
  <!-- Bootstrap v4.6 JavaScript -->
  <script 
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" 
crossorigin="anonymous"></script>

【讨论】：