2

このjsfiddleをチェックしてください。タグアンカーをクリックすると、アンカー要素の横にタグメニュー（div）が表示されますが、TOPLEFTではなくTOPRIGHTから、オフセットで遊んでみましたが、まだ行っていません。これまでのところ成功しています。

コードは次のとおりです。

HTML：

     <div id="tag-menu"></div>
 <span class="edit-tags-wrapper" style="float:right;">
   <a rel="tag" title="show questions tagged 'jquery'" class="post-tag" href="#">jquery</a>
<a rel="tag" title="show questions tagged 'animation'" class="post-tag" href="#">animation</a>
<a rel="tag" title="show questions tagged 'tags'" class="post-tag" href="#">tags</a>
<a rel="tag" title="" class="post-tag" href="#">stackoverflow</a>

JS：

  $('a.post-tag').click(function(){
  var $this = $(this);
  var offset = $this.offset(); 
  var myPos = {X:offset.left, Y:offset.top+26}; 
  $('#tag-menu').css({left:myPos.X, top:myPos.Y, width:300, height:200}).toggle();
});

CSS：

    .post-tag{
     background:#e0eaf1;
     border-right:1px solid #3E6D8E;
     border-bottom:1px solid #3E6D8E;
     padding:2px 5px;
     color:#4a6b82;
    }
    .post-tag{
     text-decoration:none;
    }

    .post-tag:hover{
     background:#3E6D8E;
     color:#fff;
    }

    #tag-menu{
     background:#666;
     position:absolute;
     display:none;
     box-shadow:0 2px 3px #000;
     border-radius:5px;
    }

または、JSFIDDLEをチェックアウトして実行できます。

http://jsfiddle.net/EBergman/xfVaT/

4

3 に答える 3

1

LIVE DEMO

$('a.post-tag').click(function(){

  var $this = $(this);
  var offset = $this.offset();
  var thisW = $(this).outerWidth(); 
  var myPos = {X:offset.left+thisW-300, Y:offset.top+26}; 
  $('#tag-menu').css({left:myPos.X, top:myPos.Y, width:300, height:200}).toggle();
});

メニューの幅とボタンを考慮して、次のようにしてouterWidth()機能させる必要があります。X:offset.left + thisW - 300

ハッピーコーディング！

于 2013-02-03T21:59:28.203 に答える
0

アップデート

$(window).width()画面サイズを知るために使用します

http://jsfiddle.net/xfVaT/4/

$('a.post-tag').click(function(){
  var $this = $(this);
  var offset = $this.offset(); 
  var menuWidth = 300;
  var menuHeight = 200;
  var myPos = {X:$(window).width() - menuWidth, Y:offset.top+26}; 
  $('#tag-menu').css({left:myPos.X, top:myPos.Y, width:menuWidth, height:menuHeight}).toggle();
});
于 2013-02-03T21:54:31.517 に答える
0

#tag-menu left を明確に修正します。

$('#tag-menu').css({left:myPos.X, top:myPos.Y, width:300, height:200}).toggle();

ちゃんと直したら？

$('#tag-menu').css({right:myPos.X+300, top:myPos.Y, width:300, height:200}).toggle();
于 2013-02-03T22:02:02.690 に答える