1

我正在努力寻找合适的 Jquery 来在与触发按钮平行的高度显示/隐藏 div。我试图将显示/隐藏 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] 出现在页面下方？

4

3 回答 3

1

所以，基本上结合其他答案会导致这个小提琴

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);
});
于 2013-05-29T15:12:51.067 回答
0

Try this,

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

If you want the div.footnotes will be hidden initially, then you need to add a css like

div.footnotes {display:none;}

Fiddle http://jsfiddle.net/6n28t/7

于 2013-05-29T04:44:04.477 回答
0

您不需要浮动，我假设您希望此文本内联显示在您的段落中。您需要绝对定位注释，然后根据单击元素的位置+元素的宽度+偏移量设置顶部/左侧。

jsFiddle 演示

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(); })
于 2013-05-29T04:59:33.497 回答