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()-与文档有关的top的{{1}}和left。使用该值和.nav-link-container的高度来设置相关.nav-link-container的偏移量，并显示下拉列表。

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

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

#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;
}

通过javascript将绝对定位的孩子居中放置在父母身上，而没有定位

1 个答案: