1

ユーザーがdivをクリックして、別の子divをスライドダウンできるようにしたいと思います。ユーザーがその子div内のボタンをクリックすると、子divがslideUpになります。

次の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>

どうもありがとうございます！

4

1 に答える 1

3

子のクリックがdom3をバブリングし、親のクリックが再びトリガーされます。

コードを次のように変更します。

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

        e.stopPropagation(); // stop event bubling

        if($(e.target).is(":hidden")) return;
        $(this).parents(".comment").slideUp();
    });
于 2012-07-11T14:31:07.980 に答える