移动自己的容器的按钮

问题描述

我在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
        });
    });
});