平滑滚动脚本例外

Question

我正在使用此脚本在具有大量锚点的页面上进行平滑滚动。 但是当我添加 Bootstrap 的手风琴时，由于这个脚本，它们不起作用(它们不会折叠/展开(。

如何对脚本进行一些调整，使其不会与折叠/扩展的手风琴发生冲突？

$('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;
}
}
});

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

在这里摆弄。

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>