Question

如何使用jquery对点击区域（div）进行移动li（＃line）？

HTML菜单：

<div class="floor-switch" id="floors">
    <div class="arrw-up"></div>
    <div id='line'></div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <div class="arrw-down"></div>
</div>

我想要的示例（但现在只移动到指定的距离）：http://jsfiddle.net/js6CM/

Answer 1

Fiddle

$('.floor-switch li').click(function() {
    $('#line').animate({
        top: $(this).position().top
    });
});

Answer 2

我认为这就是你想要的：

$('.floor-switch li').click(function() {
    var clickedElement = this;
    var line = $('#line')[0];
    var movement = clickedElement.offsetTop - line.offsetTop;

    $('#line').animate({
        left: 0,
        top: line.offsetTop + movement
    });
});

我获取clickedElement中的点击元素和line中的红线。然后我正在计算已完成的movement，最后将该移动添加到红线。

我希望它有所帮助！

问候。

修改：

jsFiddle here

平滑移动到单击的元素

2 个答案: