0

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 - ドロップダウンをトリガーに対して左揃えまたは右揃えにすることができます。

これどうやってするの？

ありがとう、ミゲル

4

3 に答える 3

0

これを試して：

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

デモはこちら

于 2013-10-14T18:32:09.127 に答える
0

「relative」のクラスをトリガーに適用し (.popup{ position: relative; };)、absolute のクラスをドロップダウンに適用します (.popup ul{ position: absolute; })。その後、left:、right; などを使用して、トリガーの範囲内でドロップダウンを移動できます。

于 2013-10-04T12:07:18.920 に答える
0

絶対配置の場合は、ポップアップ 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%;
}

コードペンの例

于 2013-10-04T12:11:01.717 に答える