javascript - AJAX成功后如何关闭Bootstrap崩溃

Question

我在我的网页中使用了 Bootstrap 折叠控件。每当我单击它用来打开和关闭的链接时。我正在使用 AJAX 将数据发送到 PHP 页面，并在成功时打印结果。 AJAX 调用后 data-toggle 应该关闭。请在下面查看我的代码。

<a data-toggle="collapse" href="#review" class="open-code btn btn-default">Write a Review</a>
<div id="review" class="collapse code">
    <form id="review">
      my code...
     </from>
</div>

$(function() {
    $(document).on('submit', '#review_post', function(e) {
        //var $this = $(this);
        var message = $(this).find("#message").val();
        var rating = $(this).find("#input-2c").val();
        var vendor_id = $(this).find("#vendor_id").val();
        var infostring = 'message=' + message + '&rating=' + rating + '&vendor_id=' + vendor_id;

        if(message=='') {
            alert('Please add your Message');
        } else {
            $.ajax({
                type: "POST",
                url: "/review_vendor.php",
                data: infostring,
                success: function(data){
                    //alert(data);
                    $('#review_post').each(function() {
                        this.reset();
                    }); 
                    // here I want to use the code to close data-toggle

                    $("#flash").append(data);
                }
            });
        }
        e.preventDefault();  
    }); 
});

我试过这段代码，但它不起作用:

$(this).find('.collapse').trigger('click');

Answer 1

您应该再次调用 a 元素上的 collapse() 方法，提供 'hide' 作为参数。试试这个:

$(this).find('.collapse').prev('a').collapse('hide');

Collapse documentation

另请注意，您可以对代码进行一些小的调整，以使其遵循最佳实践。这是一个完整的例子:

$(document).on('submit', '#review_post', function(e) {
    e.preventDefault();  
    var $this = $(this);
    var message = $this.find("#message").val();
    var rating = $this.find("#input-2c").val();
    var vendor_id = $this.find("#vendor_id").val();

    if (message == '') {
        alert('Please add your Message');
    } else {
        $.ajax({
            type: "POST",
            url: "/review_vendor.php",
            data: {
                message: message,
                rating: rating,
                vendor_id: vendor_id                    
            },
            success: function(data) {
                $('#review_post').each(function() {
                    this.reset();
                }); 
                $this.find('.collapse').prev('a').collapse('hide');
                $("#flash").append(data);
            }
        });
    }
});