2

请检查这个 jsfiddle，当我单击标记锚时，我希望标记菜单（div）出现在锚元素旁边，但从右上而不是左上，我尝试过使用偏移量，但我没有到目前为止成功。

这是代码：

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。

$('#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 回答