时间戳

首页 > 解决方案 > 使用 URL 展开 Bootstrap 手风琴

html - 使用 URL 展开 Bootstrap 手风琴

问题描述

我正在使用引导折叠。我正在尝试使用 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>

标签： htmljquerycssbootstrap-4

解决方案

首先请注意，您可以更简单地使用location.hash. 其次，您将附加_c到您在 jQuery 对象中选择的 Id，但该 ID 在您的 HTML 中不存在。

要执行您需要的操作，您需要直接选择元素，然后调用collapse('show')它以显示它。

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

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

推荐阅读