0

私は次の構造を持っています

テキストの詳細 詳細を
表示

テキスト
表示の詳細...

今押すと 詳細を表示 押されたリンクと同じ高さに詳細が表示されるようにします。(100 のテキスト/リンクを想像してください。)

要素の絶対配置が可能な小さな JSfiddle をまとめましたが、スクロール位置に基づいて動的に動作させることができません。http://jsfiddle.net/uRN64/201/

位置を設定するために、次の JavaScript 関数を試しました。

var div = document.getElementById('update');
//div.style.top = window.pageYOffset;
//div.style.top = document.body.parentElement.scrollTop;
//div.style.top = document.body.scrollTop;
div.style.top = '100px';
4

5 に答える 5

3

e.target要素とoffsetTopプロパティを使用します。

それは簡単です：

function toCurrentPosition(event) {
    var div = document.getElementById('update');
    div.style.top = event.target.offsetTop + "px";
}

jsFiddle デモ

PS - onclickhref の代わりに event を使用していることに注意してください。

于 2013-08-26T10:21:24.067 に答える
1

クリックした要素の位置を取得し、詳細 div をそこに移動します。

参照: JavaScript で要素の位置を取得する

コメントアウトしたコードの意味は大きく異なります (scrollTop を関数のように想像すると、クリックした要素ではなく、document.body で呼び出されていることがわかります)。window,pageYOffset は window.scrollY のエイリアスであることにも注意する必要があると思いました。これについては、おそらくより多くのドキュメントが見つかるでしょう。

于 2013-08-26T10:15:09.730 に答える
0

Itay が言うように、ターゲット情報を使用できます。また、HTML の各リンクに書き込む代わりに、jQuery を介してイベントをバインドすると、よりクリーンになります。

http://jsfiddle.net/uRN64/210/

HTML:

<div class="my-show-details-list">
    Long text <br />
      <a name="a2">Show Details</a>  <br />  
    Long text <br />
      <a name="a2">Show Details</a>  <br />  
    Long text <br />
      <a name="a2">Show Details</a>  <br />  
    Long text <br />
      <a name="a2">Show Details</a>  <br />  
    Long text <br />
</div>

JS:

$(function() {
   //Here you select all the a tags inside the div and you apply them the same event:
    $(".my-show-details-list>a").click(function() {
        var div = document.getElementById('update');
        div.style.top = event.target.offsetTop + "px";
    });
});
于 2013-08-26T11:11:01.317 に答える