Question

请点击这个jsfiddle，当我点击一个标签锚时我希望标签菜单（div）出现在锚元素旁边但是从TOP RIGHT而不是TOP LEFT，我尝试过使用偏移但是我到目前为止还没有成功。

以下是代码：

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/

Answer 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

快乐的编码！

Answer 2

<强>更新

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

Answer 3

您专门修复了左侧的＃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();

jQuery：如何从右上方显示隐藏的div

3 个答案: