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

对你的触发器应用一个'relative'类（.popup {position：relative;};）并在下拉列表中应用一个绝对类（.popup ul {position：absolute;}）。然后，您可以使用left：，right;等在触发器的范围内移动

。

Answer 2

对于绝对定位，您需要移动弹出窗口INSIDE a a tags

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

然后定位弹出窗口divs

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

Codepen Example

Answer 3

试试这个：

$('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;
});

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

3 个答案:

演示here