jQuery：如何讓隱藏的div從右上角出現

請檢出這個jsfiddle，當我點擊一個標籤定位點時我希望標籤菜單（div）出現在定位元素旁邊，但是從TOP RIGHT而不是TOP左邊，我嘗試過使用膠印，但到目前爲止我還沒有取得成功。jQuery：如何讓隱藏的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/

來源

2013-02-03 Eric Bergman

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-03 21:59:28

非常感謝羅克森，這正是我想要的，你是一個天才！我不知道你是否記得，但是這是你創建的演示，回到我在這裏問的另一個問題。 –

@EricBergman哦！謝謝！真！哇！這就是爲什麼你的名字很熟悉！別客氣！（是的！演示也有點熟悉:)） –

@EricBergman http://stackoverflow.com/questions/14200320/what-type-of-animation-does-stackoverflow-use-for-tag-popup :) –

更新

使用$(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-03 21:54:31 sdespont

現在，它從左上顯示，我想如果你注意到，當你點擊它的標籤菜單不與標籤元素對準它從右上方和您的jsfiddle編輯顯示。標籤菜單應出現在標籤元素的下方，我希望標籤元素的底部右側與標籤菜單部分的右側對齊。 –

答覆已更新。 – sdespont

您特別修復了左側的＃標籤菜單。

$('#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-03 22:02:02

jQuery：如何讓隱藏的div從右上角出現

回答

相關問題