Question

我使用此脚本在具有大量锚点的页面上进行平滑滚动。但是当我添加Bootstrap的手风琴时，由于这个脚本，它们无法工作（它们不会崩溃/扩展）。

如何对脚本进行一些调整，以免它与手风琴折叠/扩展相撞？

＆＃13;

$('a[href*="#"]').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 500);
      return false;
    }
  }
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div id="stats" role="tablist" aria-multiselectable="true">
  <div class="card stats">
    <h4 class="card-header" role="tab" id="statsHeading">
      <a data-toggle="collapse" data-parent="#stats" href="#collapseStats" aria-expanded="false">Header</a></h4>
    <div id="collapseStats" class="collapse" role="tabpanel" aria-labelledby="statsHeading">
      <div class="card-block">
        Content...
      </div>
    </div>
  </div>
</div>

＆＃13;

Fiddle here

Answer 1

如果您将类accordion添加到Bootstrap手风琴链接，则可以使用.not()将其从滚动功能中的选区中排除。

<强> HTML

<a class="accordion" data-toggle="collapse" data-parent="#stats" href="#collapseStats" aria-expanded="false">Header</a>

<强> JS

$('a[href*="#"]').not('.accordion').click(function() { ... });

Answer 2

使用我的代码更新您的HTML代码，问题将解决。请检查并确认。如果您检查我的代码，我只是在标签中进行更改，我希望您能理解问题是什么:)

    <div id="stats" role="tablist" aria-multiselectable="true">
  <div class="card stats">
    <h4 class="card-header" role="tab" id="statsHeading">
      <a data-toggle="collapse" data-parent="#stats" href="javascript:void(0)" data-target="#collapseStats" aria-expanded="false">Header</a></h4>
    <div id="collapseStats" class="collapse" role="tabpanel" aria-labelledby="statsHeading">
      <div class="card-block">
        Content...
      </div>
    </div>
  </div>
</div>

使平滑滚动脚本例外

2 个答案: