Question

我正在努力寻找合适的Jquery来显示/隐藏与触发按钮平行的高度的div。我试图将show / hide div偏移到右边，但由于脚注出现在不同的左/右定位中，每个都会有所不同。相反，我需要将div放在右边的另一个div内。

我希望在某些文本中添加超链接脚注，以便读者不必搜索脚注，也不会被太多文本所淹没。我希望一次打开多个脚注，但如果需要一次一个脚本才能正确显示，那就这样吧。

编辑：

@ rohan-kumar帮助了这段代码

$('.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

因此，基本上结合其他答案会导致 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);
});

Answer 2

试试这个，

<强> 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 3

你不需要花车，我假设你希望这段文字在你的段落中显示为内联。您需要绝对定位笔记，然后根据所点击元素的位置+元素宽度+偏移量设置顶部/左侧。

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

相对于触发器定位隐藏/显示div

3 个答案: