定位相對於觸發器的隱藏/顯示div

Question

我很努力地找到正確的jquery來顯示/隱藏一個div，其高度與觸發器按鈕平行。我試圖將顯示/隱藏div偏移到右側，但因爲腳註出現在不同的左/右定位中，所以每個都不相同。相反，我需要將div放置在右側的另一個div內。

我的希望是給一些文本增加超鏈接的腳註，這樣讀者不必搜索腳註，也不會被太多的文本壓垮。我寧願一次打開一個以上的腳註，但如果它需要一次一個才能正確顯示，那就這樣吧。

編輯：

@羅漢 - 庫馬爾幫助與此代碼

$('.a_footnote').on('click',function(e){ 
e.preventDefault(); 
var divId=$(this).data('divid'); 
console.log(divId); 
$('#'+divId).toggle(); 
}); 

因此，這裏是它代表的方式：http://jsfiddle.net/6n28t/21/

然而，我的主要問題仍然是 - 我該怎麼做腳註出現在與觸發器相同的高度處？這些將是很長的一段文字，我希望腳註出現在與相應標記相同的高度。我怎樣才能讓[2]在頁面上更向下看？

Answer 1

試試這個，

HTML

<div class="wrapp"> 
    <div class="content" style="float:left;"> 
     <div> Lorem ipsum (<a class="a_footnote" href='javascript:;' data-divid="footnote1">[1]</a>).</div> 
    </div> 
    <div class="footnotes" style="float:right"> 
     <div id="footnote1">1. Foo Bar</div> 
    </div> 
     <div class="clear"></div> 
</div> 

CSS

.wrapp{ 
    border:1px solid red; 
    height:50px; 
} 
.clear{ 
    clear:both; 
} 

SCRIPT

$('.a_footnote').on('click',function(e){ 
    e.preventDefault(); 
    var divId=$(this).data('divid'); 
    console.log(divId); 
    $('#'+divId).toggle(); 
}); 

如果你想在div.footnotes將hidden開始，那麼你需要添加一個css像

div.footnotes {display:none;} 

小提琴http://jsfiddle.net/6n28t/7

Answer 2

你不需要的花車，我假設你會希望此文本在您的段落中內聯顯示。您需要絕對定位音符，然後根據您單擊的元素的位置+元素的寬度+偏移量設置頂部/左側。

jsFiddle Demo

HTML：

<div class="content"> 
    <p> Lorem ipsum (<a href="#" class="footnote" id="footnote1">[1]</a>).</p> 
    <p> Lorem ipsum (<a href="#" class="footnote" id="footnote2">[2]</a>).</p> 
</div> 

<div class="footnotes"> 
    <div class="footnote1">1. Foo Bar</div> 
    <div class="footnote2">2. Foo Bar</div> 
</div> 

CSS

.footnotes > div { display: none; position: absolute; border: solid 1px red; } 

的JavaScript

$('.footnote').on('click', function(e) { 
    e.preventDefault(); 
    var $note = $('.' + this.id); 
    var $position = $(this).position(); 
    $('.footnotes > div').hide(); 
    $note.css({ 
     top : $position.top, 
     left: $position.left + $(this).width() + 5 
    }).show(); }) 

Answer 3

所以，基本上結合其他答案導致這個Fiddle

HTML是一樣的，你有你的提琴什麼。

CSS

.wrapp{ 
    border:1px solid red; 
    height:100%; 
} 

.clear{ 
    clear:both; 
} 

.footnotes div { 
    position: relative; 
    display: none; 
} 

的JavaScript

$('.a_footnote').on('click',function(e){ 
    e.preventDefault(); 
    var divId=$(this).data('divid'); 
    var height = $(this).position().top; 
    console.log(divId); 
    $(".footnotes div").hide(); 
    $('#'+divId).toggle().css("top", height - 10); 
});