javascript - 通过 javascript 将一个绝对定位的 child 集中到一个没有定位的 parent 身上

Question

所以我的处境有点棘手。基本上我有这个可滚动的水平导航，它有一个 overflow-x: auto。导航具有与悬停时出现的下拉菜单的链接。

溢出会阻止下拉列表在未将其位置设置为 absolute 的情况下出现。需要注意的是，我无法再将下拉菜单与链接容器对齐。这在使用触控板并在悬停在导航链接上时水平滚动时更为明显。下拉菜单将错位。通过 javascript 保持下拉菜单与其父内联水平锚定的方法是什么？我不反对使用 jQuery。

我的第一次尝试是取父级宽度的一半，将其用作负边距并应用 50% 的左定位。因为它没有锚定，所以它会自动以全局父级为中心。

$('.nav-link-container').each(function() {
  $(this).find('.dropdown').css({
    left: '50%',
    marginLeft: -(this.offsetWidth / 2),
  })
})

#nav {
  border: 1px solid black;
  width: 200px;
  overflow-x: auto;
  padding: 10px;
  white-space: nowrap;
}

.nav-link-container {
  display: inline-block;
  margin-right: 10px;
}

.nav-link-container:last-of-type {
  margin-right: 0;
}

.nav-link-container:hover .dropdown {
  display: block;
}

.dropdown {
  position: absolute;
  display: none;
  background-color: #fff;
  border: 1px solid green;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">
  <div class="nav-link-container">
    <a href="#">Link 1</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 2</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 3</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 4</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 5</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 6</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>
</nav>

Answer 1

您需要为此使用 JS (jQuery)。使用 .hover()悬停链接时显示/隐藏下拉菜单的事件处理程序。

在函数的处理程序中获取 .offset() - 与文档相关的 .nav-link-container 的 top 和 left。使用它和 .nav-link-container 的高度来设置相关 .dropdown 的偏移量，并显示下拉列表。

在处理程序中重置下拉菜单的偏移量并隐藏它。

您可以添加 .scroll() #nav 滚动时更新偏移量的事件处理程序。

var $nav = $('#nav')

function setDropdownOffset($link, $dropdown) {
  var offset = $link.offset()

  return $dropdown.offset({
    top: offset.top + $link.height(),
    left: offset.left
  })
}

$('.nav-link-container').each(function() {
  var $this = $(this)
  var $dropdown = $this.find('.dropdown')

  $(this).hover(function() {
      var offset = $this.offset()

      $nav.on('scroll', function() {
        setDropdownOffset($this, $dropdown)
      })

      setDropdownOffset($this, $dropdown)
        .show()
    },
    function() {
      $nav.off('scroll')

      $dropdown
        .offset({
          top: 0,
          left: 0
        })
        .hide()
    })
})

#nav {
  border: 1px solid black;
  width: 200px;
  overflow-x: auto;
  padding: 10px;
  white-space: nowrap;
}

.nav-link-container {
  display: inline-block;
  margin-right: 10px;
}

.nav-link-container:last-of-type {
  margin-right: 0;
}

.dropdown {
  position: absolute;
  display: none;
  background-color: #fff;
  border: 1px solid green;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">
  <div class="nav-link-container">
    <a href="#">Link 1</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 2</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 3</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 4</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 5</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>

  <div class="nav-link-container">
    <a href="#">Link 6</a>

    <div class="dropdown">
      <div>Dropdown Link 1</div>
      <div>Dropdown Link 2</div>
      <div>Dropdown Link 3</div>
      <div>Dropdown Link 4</div>
    </div>
  </div>
</nav>