Question

我希望用户能够点击div，以滑动另一个子div。当用户点击该子div内的按钮时，子div将会滑动。

使用以下JQuery，div正在向下滑动。然而，当我点击按钮时，它会向上滑动然后再次向下滑动。

<script type="text/javascript">
    $('.comment').hide() // hides all the divs which have been generated. These are the ones that need to slideUp and slideDown. 


    $(".listview-item-inside-comment").live('click', function () {
        $(this).find(".comment").slideDown();
    });


    $(".form-button").live('click', function (e) {
        if($(e.target).is(":hidden")) return;
        $(this).parents(".comment").slideUp();
    });

</script>

如果有帮助，这里是HTML：

<div class="listview-item-comment">
    <div class="listview-item-inside-comment">
        <a>Here is a comment...</a>
        <div class="listview-item-info">
            username @ timestamp
            <a style="float: right;">click to reply</a>
        </div>

        <div class="comment">
            <form>
                <textarea name="commentField">Write your comment here...</textarea>
                <p align="center">
                    <input type="submit" class="form-button" value="Submit Comment" />
                    <input type="button" class="form-button" value="Cancel" />
                </p>
            </form>
        </div>
    </div>
</div>

非常感谢！

Answer 1

您的孩子点击正在向三个方向冒泡，导致再次触发父点击。

将您的代码更改为：

 $(".form-button").live('click', function (e) {

        e.stopPropagation(); // stop event bubling

        if($(e.target).is(":hidden")) return;
        $(this).parents(".comment").slideUp();
    });

Jquery slideup和slideup忽略父div

1 个答案: