html - 尝试使用 Bootstrap 创建图像菜单

Question

我正在尝试为投资组合网站创建带有 Bootstrap 的图像菜单。但是导航有很大缺陷，我该如何解决？

https://codepen.io/wouter0102/pen/XoGaEe

$('[data-toggle="collapse"]').on('click', function(e) {
  if ($(this).parents('.accordion').find('.collapse.show')) {
    var idx = $(this).index('[data-toggle="collapse"]');
    if (idx == $('.collapse.show').index('.collapse')) {
      e.stopPropagation();
    }
  }
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  padding: 0px;
  margin: 0px;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: black;
}

.button a {
  color: black;
  font-weight: 700;
}

.button a:hover {
  text-decoration: none;
  color: white;
}

.collapsing {
  transition: height 0.6s;
}

.collapse {
  height: 30em;
  background-image: url(https://media4.s-nbcnews.com/i/newscms/2017_02/1186900/cute-baby-names-parenting-today-tease-170109_30c48f2b22f1e8ad95773edb635f0085.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}

.collapse p {
  width: 60%;
  float: right;
  position: relative;
  top: 25em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div id="main">
  <div id="accordion" class="accordion">
    <div id="Newbornpix" class="collapse show" data-parent="#accordion">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quae, reprehenderit ex, dolorum tempora enim sequi dolor aliquam, rerum quos maxime soluta. Quos quas at voluptas ipsam, ea! Ab, fuga.
      </p>
    </div>
    <div id="Newbornbutton" class="collapsed button">
      <a href="#Newbornpix" data-toggle="collapse">NEWBORN</a>
    </div>
    <div id="Geboortepix" class="collapse" data-parent="#accordion">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, veniam ipsum ut ad, incidunt veritatis, culpa qui dolorum odio et recusandae quod quisquam rerum saepe libero sed commodi laborum repudiandae.
      </p>
    </div>
    <div id="Geboortebutton" class="collapsed button">
      <a href="#Geboortepix" data-toggle="collapse">GEBOORTE</a>
    </div>
    <div id="Portretpix" class="collapse" data-parent="#accordion">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores laborum voluptatum facilis voluptates assumenda beatae maxime nobis aliquid ullam natus modi saepe commodi, inventore repellat ad qui! Quasi, iure.
      </p>
    </div>
    <div id="Portretbutton" class="collapsed button">
      <a href="#Portretpix" data-toggle="collapse">PORTRET</a>
    </div>
    <div id="Contact" class="collapse" data-parent="#accordion">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem aperiam pariatur eos vitae molestias, ipsam quasi iusto repellat expedita similique sequi quas ex quisquam porro nemo distinctio explicabo. Magni!
      </p>
    </div>
    <div id="Contactbutton" class="collapsed button">
      <a href="#Contact" data-toggle="collapse">CONTACT</a>
    </div>
  </div>
</div>
<script>
  /* always keep at least 1 open by preventing the current to close itself */
  $('[data-toggle="collapse"]').on('click', function(e) {
    if ($(this).parents('.accordion').find('.collapse.show')) {
      var idx = $(this).index('[data-toggle="collapse"]');
      if (idx == $('.collapse.show').index('.collapse')) {
        // prevent collapse
        e.stopPropagation();
      }
    }
  });
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

编辑所以我的意思是它是有缺陷的，如果你查看 codepen 链接，你会发现转换不是流畅的，并且折叠的 tekst 必须跳转到它的位置。您会看到它从一个位置开始，然后跳转到它需要的位置。此外，如果正在发生过渡，您会看到它在 1 秒左右的时间内很好地展开，然后跳转到完全展开。当试图展开位于另一个部分上方的部分时，下面的部分将跳起半秒然后返回。我还想在将它们展开为不同并与背景图像重叠时成为链接的样式，我该怎么做？

提前致谢!

Answer 1

您正在使用两个不同的 jQuery 库，一个在您的 <head> 中一个在页面底部。他们互相阻止运行( $ 正在由第二个库重新分配)。删除其中任何一个，您的代码就可以正常工作。或者，您可以使用 jQuery noConflict(true)从第二个库中使用两者。但是，不建议这样做。