jquery - 将下拉元素与绝对位置对齐

Question

我正在尝试像在 Twitter 中一样创建一个简单的下拉框：

https://about.twitter.com/products（点击语言项目）。

为此，我使用以下 HTML：

<a href="#language">English</a>
<div class="popup" id="language">
  <ul>
    <li>Portuguese</li>
    <li>English</li>
    <li>French</li>
  </ul>
</div>

示例：http ://codepen.io/mdmoura/pen/upIjv 。

我会：

1 - 与其链接触发器对齐的下拉菜单；

2 - 能够左对齐或右对齐下拉菜单到他们的触发器。

我怎样才能做到这一点？

谢谢你，米格尔

Answer 1

尝试这个：

$('a').click(function (event) {
    $('.popup').hide();
    var div = $($(this).attr('href'));
    var position = $(this).position();

    $(div).toggle();
    $(div).css({
        'left': position.left,
        'top': position.top + 20
    })
    return false;
});

演示在这里

Answer 2

将“相对”类应用到您的触发器（.popup{ position: relative; };）并将绝对类应用到下拉列表（.popup ul{ position: absolute; }）。然后，您可以使用 left:、right; 等在触发器范围内移动下拉菜单。

Answer 3

对于绝对定位，您需要将弹出 div 移动到 a 标签内

  <a href="#language">English
  <div class="popup" id="language">
    <ul>
      <li>Portuguese</li>
      <li>English</li>
      <li>French</li>
    </ul>
  </div>
  </a>

然后定位a标签

.wrap a {
  position:relative;
}

然后定位弹出窗口的div

.popup {  
  border: 1px solid red;
  display: inline;
  display: none;
  background-color: #D0D0D0;
  color: #404040;
  position: absolute;
  padding: 0; 
  margin: 0;
  top :100%;
}

代码笔示例