Question

我在div中有一个按钮，我想在单击按钮时滑动它。当按钮位于滑动div之外时div会滑动，但是当我在div内部移动按钮时它会停止滑动。

我明白为什么会这样，但不知道如何让它发挥作用。

这是带有外部按钮的工作Html。

<div class="slide">
    <button type="button" id="slideleft" class="btn btn-default alert_button " title="New Message!" style="border: none; background-color: none !important;"></button>
    <div class="inner" style="margin-right: -100px;"></div>           
</div>

这是我想要使用的Html，里面有按钮。

<div class="slide">
    <div class="inner" style="margin-right: -100px;">
        <button type="button" id="slideleft" class="btn btn-default alert_button " title="New Message!" style="border: none; background-color: none !important;"></button>
    </div>
</div>

这是控制滑动动作的jQuery。

$(document).ready(function() {
    $('#slideleft').click(function(slide) {
        var $lefty = $(this).next();
        $lefty.animate({
            left: parseInt($lefty.css('left'),10) == 0 ?
                -$lefty.outerWidth() : 
                0
        });
    });
});

Answer 1

我不确定您想要什么，但当按钮不在.inner范围内时，您的代码var $lefty = $(this).next();会定位.inner div。如果您想将按钮放在div中，则需要var $lefty = $(this).parent();

移动自己的容器的按钮

1 个答案: