我试图创建一个图像菜单与引导为投资组合网站。但导航是高度缺陷，我该如何解决这个问题？
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秒左右，然后跳到完全扩展。当试图展开一个位于另一个部分上方的部分时，下面的部分会向上跳半秒，然后再向下跳。我也想成为链接的风格，当我展开它们时，它们是不同的，并与背景图像重叠，我该如何去做呢？
先谢了！