0

次の JavaScript と HTML があります。その意図は、選択された LI を使用して UL を親 DIV と同じ場所に配置することであり、まさにそれを行います。

ただし、親 DIV がページの上部にあり、多くの LI があり、選択された LI がページの下部にある場合があります。リストは配置されていますが、その上部がウィンドウから外れています。

リストがカットオフされないようにするにはどうすればよいですか? 理想的には、スクロールバーを使用して、選択した要素が親 DIV の同じ位置に配置されるようにします。

ありがとう

var list=$('#myList'),
index=list.find('li.selected').index();
list.find('li.selected').removeClass('selected');
var pos=list.find('li').eq(index).addClass('selected').position();
list.css({top:  0 - pos.top, left:pos.left});

<div style="display:relative">
    <ul id="myList" style="display:absolute">
        <li>xxx</li>
        <li class="selected">xxx</li>
        <li>xxx</li>
        <li>xxx</li>
    </ul>
</div>
4

1 に答える 1

2

あなたの div のスタイルはdisplay:relativeand と言ってdisplay:absoluteいますが、私はあなたが and を意味position:relativeしていると思いますposition:absolute。

編集：

配置に関しては、UL が上部に近いかどうかを手動で確認し、設定している上部のプロパティがウィンドウに対して負でないことを確認する必要があります。この場合、トップの li を 0 から開始し、反復ごとに下降する必要があります。

于 2012-11-06T12:55:28.857 に答える