Question

正如您在单击链接时在下面的代码段中看到的那样，它不起作用。它应该显示带有文本的隐藏div。但是，如果删除JS代码，它就可以工作。

我的问题是我需要使用这个JS代码才能在整个页面中顺利向下滚动（例如：当有人点击链接并将其发送到页面末尾等时）。

有没有办法让我的JS和这个bootstrap 4代码一起工作？它们完全分开工作。

＆＃13;

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

＆＃13;

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

＆＃13;

由于

Answer 1

关于这个问题的评论是在正确的道路上，但我相信你会想要使用一个支持$ .animate（）的jQuery版本（＆＃34; slim＆＃34;包不），并且还支持Bootstrap 4 alpha（1.12.4不支持）。您可能希望使用完整的3.1.1软件包，但请务必自行咨询文档以确定：

Answer 2

来自jQuery release notes：

超薄构建

有时您不需要ajax，或者您更喜欢使用专注于ajax请求的众多独立库之一。通常，对所有Web动画使用CSS和类操作的组合更为简单。除了包含ajax和效果模块的常规jQuery版本外，我们还发布了一个“瘦身”版本，不包括这些模块。

因此，根据评论并且因为您使用的是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>

我如何修复我的js代码，以便它与Bootstrap 4 collapse-div一起使用？

2 个答案: