1

トリガー ボタンと平行な高さで div を表示/非表示にする適切な Jquery を見つけるのに苦労しています。show/hide div を右にオフセットしようとしましたが、脚注が異なる左右の位置に表示されるため、それぞれが異なります。代わりに、右側の別の div 内に div を配置する必要があります。

ハイパーリンク付きの脚注をいくつかのテキストに追加して、読者が脚注を探す必要がないようにするだけでなく、あまりにも多くのテキストに圧倒されないようにすることを望んでいます。一度に複数の脚注を開きたいと思いますが、適切に表示するために一度に 1 つずつ開く必要がある場合は、それでかまいません。

編集：

@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

フロートは必要ありません。このテキストを段落にインラインで表示することを想定しています。メモを絶対に配置してから、クリックした要素の位置 + 要素の幅 + オフセットに従って上/左を設定する必要があります。

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 に答える