使用 URL 扩展 Bootstrap 手风琴

Question

我正在使用引导折叠。 我正在尝试使用 URL 自动打开折叠。 例如，我想通过页面重定向打开第二个折叠。 如果我的 URL 是这样的： http://test.com/accordion.html#collapseOne或http://test.com/accordion.html#collapseTwo

如果我打开这个 URL: http://test.com/accordion.html#collapseThree ，页面应该滚动到目标并展开折叠，如果有任何打开的折叠则关闭。 我尝试了很多方法，这是我的代码。

jQuery(document).ready(function() {
  var url = document.location.toString();
  if (url.match('#')) {
    var hash = url.split('#')[1];
    $('.card .collapse').removeClass('show');
    $('#' + hash + '_c').addClass('show');
  }
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne_c" aria-expanded="true" aria-controls="collapseOne">
          Item #1
        </button>
      </h2>
    </div>
    <div id="collapseOne_c" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Testing</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo_c" aria-expanded="false" aria-controls="collapseTwo">
           Item #2
         </button>
      </h2>
    </div>
    <div id="collapseTwo_c" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        <p>Testing</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree_c" aria-expanded="false" aria-controls="collapseThree">
          Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree_c" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        <p>Testing</p>
      </div>
    </div>
  </div>
</div>

Answer 1

首先请注意，您可以更简单地使用location.hash从 URL 获取片段。 其次，您将_c附加到您在 jQuery object 中的 ID select 中，但您的 Z99938282F0407184ZDB 中不存在此 ID。

要执行您需要的操作，您需要直接 select 元素，然后在其上调用collapse('show')以使其显示。

此外，您不需要以编程方式滚动页面，只需在 URL 中包含与页面中元素的id匹配的片段，浏览器将自动滚动到该元素。

jQuery($ => {
  if (window.location.hash) {
    var hash = window.location.hash;
    $(hash).collapse('show');
  }
});