Jquery SlideUp 和 SlideUp 忽略父级 div

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

您的子点击正在 dom 3 中冒泡，导致父点击再次被触发。

将代码更改为:

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

        e.stopPropagation(); // stop event bubling

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