正如您在下面的代码片段中看到的，当您单击该链接时，它不起作用。它应该显示一个带有文本的隐藏 div。但是，如果删除 JS 代码，它就可以工作。
我的问题是我需要使用这个 JS 代码才能在整个页面中平滑地向下滚动(例如:当有人单击链接时，它会将您发送到页面末尾等......)
有什么方法可以让我的 JS 和这个 bootstrap 4 代码一起工作吗？它们完全分开工作。
$(function() {
$('a[href*="#"]:not([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
}, 1000);
return false;
}
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="font-awesome-animation.min.css">
</head>
<body>
<div style="margin: 0 auto; text-align: center; display: block">
<i aria-hidden="true" class="fa fa-chevron-down yarrow"></i> <a aria-controls="work-exp-collapse" aria-expanded="false" class="SeeMore2 aa-gray-line" data-toggle="collapse" href="#work-exp-collapse">view more experience</a>
</div>
<div class="collapse" id="work-exp-collapse">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
</html>谢谢
最佳答案
Slim build
Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules.
因此，根据评论，并且由于您使用的是 animate 函数，因此您需要包含基本 jQuery 而不是 SLIM 版本:
https://code.jquery.com/jquery-3.1.1.min.js
示例:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function(e) {
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) {
e.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
}
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div style="margin: 0 auto; text-align: center; display: block">
<i aria-hidden="true" class="fa fa-chevron-down yarrow"></i> <a aria-controls="work-exp-collapse" aria-expanded="false" class="SeeMore2 aa-gray-line" data-toggle="collapse" href="#work-exp-collapse">view more experience</a>
</div>
<div class="collapse" id="work-exp-collapse">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>关于javascript - 我如何修复我的 js 代码，以便它与 Bootstrap 4 Collapse-div 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42027361/