主页 / 问题 / 981105
Accepted
John
Asked:2020-05-14 12:31:03 +0000 UTC2020-05-14 12:31:03 +0000 UTC

为什么单击元素时下拉菜单会影响底部元素

  • 772

资源：

按照链接

问题： 为什么，点击第三块（16版）时，菜单退出时，底部块跳转，因为dropdown 是流外（positions: absolute），对底部元素有什么影响？？？我在我的代码中使用 jQuery 3.4.1。

javascript

1 个回答

  1. Best Answer

    它在这里dropdown完全无关紧要。在为消失和外观设置动画span时，会发生高度跳跃。

    可以通过添加div高度边距来处理它。

    <div class="spacer">
  <span>version</span>
</div>

    .list-nav__link .spacer {
  min-height: 25px;
}

    这是一个例子：codepen

    let arrow = $('.arrow');
let b = $('.arrow').parent();

$('.list-nav__item:last-child').next().addClass('asdasdsadasd');

let versionDropdown = $('.version-dropdown');

b.on('click', function() {
  event.preventDefault();
  arrow.toggleClass('arrow-spin');
  if (arrow.hasClass('arrow-spin')) {
    versionDropdown.stop(true, true).slideDown(500);
    b.next().find('span').hide(500);
  } else {
    versionDropdown.stop(true, true).slideUp(500);
    b.next().find('span').show(500);
  }

});
    ul, p, a {
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 30px;
}

.display-f {
  display: flex;
}

.list-nav {
  margin-bottom: 100px;
}
.list-nav__item {
  flex-grow: 1;
  width: 30%;
  text-align: center;
}
.list-nav__item:last-child {
  position: relative;
}
.list-nav__link {
  width: 50%;
  display: inline-block;
  text-align: center;
  min-height: 50px;
}
.list-nav__link b, .list-nav__link span {
  display: block;
  text-align: center;
  color: #000;
}
.list-nav__link b {
  font-size: 24px;
  display: inline-block;
  margin-bottom: 20px;
}
.list-nav__link span {
  text-transform: uppercase;
  min-height: 18px;
  letter-spacing: 10px;
}
.list-nav__link .spacer {
  min-height: 25px;
}
.list-nav__link .arrow {
  border: 2px solid;
  border-bottom: 0;
  border-left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  transform: rotate(-45deg);
  margin-left: 10px;
  transition: all .5s;
}
.list-nav .arrow-spin {
  transform: rotate(135deg);
}

.version-dropdown {
  position: absolute;
  border: 2px solid;
  width: 100px;
  transform: translateX(100%);
  margin-left: 50px;
  display: none;
  background: #fff;
  top: 30px;
}
.version-dropdown__item {
  border-bottom: 2px solid;
}
.version-dropdown__item a {
  padding-right: 5px;
  display: inline-block;
  width: 100%;
  text-align: right;
  font-size: 24px;
  font-weight: bolder;
  color: #000;
}
.version-dropdown__item:last-child {
  border-bottom: none;
}

.list-date {
  justify-content: space-between;
}
.list-date__item {
  width: 50%;
  text-align: center;
}
.list-date__num {
  text-align: center;
  margin-bottom: 20px;
}
.list-date__text {
  text-transform: uppercase;
  letter-spacing: 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container main__nav">
  <ul class="list-nav display-f">
    <li class="list-nav__item">
      <a class="list-nav__link" href="">
        <b>Exodus</b>
        <span>Collection</span>
      </a>
    </li>

    <li class="list-nav__item">

      <a class="list-nav__link" href="">
        <b>Zarya</b>
        <span>Design 001</span>
      </a>
    </li>
    <li class="list-nav__item list-nav__item_dropdown">

      <a class="list-nav__link" href="">
        <b>16 <i class="arrow"></i></b>
        <div class="spacer">
          <span>version</span>
        </div>
      </a>
      <ul class="version-dropdown">
        <li class="version-dropdown__item"><a href="">15</a></li>
        <li class="version-dropdown__item"><a href="">14</a></li>
        <li class="version-dropdown__item"><a href="">13</a></li>
        <li class="version-dropdown__item"><a href="">New</a></li>
      </ul>

    </li>
  </ul>
  <ul class="list-date display-f">
    <li class="list-date__item">
      <p class="list-date__num">2019-05-12 12:03:46</p>
      <span class="list-date__text">Created</span>
    </li>
    <li class="list-date__item">
      <p class="list-date__num">2019-05-12 12:03:46</p>
      <span class="list-date__text">Updated</span>
    </li>
  </ul>
</div>

    • 3

相关问题