bootstrap 折叠无效，元素未隐藏

Question

这是我的代码，我围绕它尝试了很多东西。

$('#paired-results').on('show.bs.collapse', function () {

$('.callToAction').collapse('hide');
});

$('#paired-results').on('hide.bs.collapse', function () {
    $('.callToAction').collapse('show');
});

.......

<div id="callToAction" class="row px-2 px-sm-0 mt-4 partners collapse show">
            <form asp-controller="mycontroller" asp-action="myaction" method="post" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-begin="Mymethod">
                <div class="form-group">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <label for="email" class="font-weight-bold">Enter the Email address</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col text-danger" id="errormessage" name="errormessage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="input-group mb-3">
                                    <input type="email" class="form-control rounded-card input font-weight-bold" id="email" name="email" placeholder="Enter Tidepool email" value="@Model.TidepoolEmailAddress" required>
                                </div>
                            </div>
                            <div class="col">
                                <button type="submit" class="btn btn-info tidepool-register-submit" data-toggle="collapse" data-target="#paired-results" aria-controls="errormessage">Link Account</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="paired-results" class="collapse">
            <div class="row px-2 px-sm-0 mt-4" id="Result">
                <div class="col-12 text-dark px-0">
                    <div class="w-100 p-3 m-0" id="message"></div>
                </div>
            </div>
        </div>

我们的想法是，当点击按钮时，它会提交表单，如果我们得到一个成功的结果，表单应该隐藏并显示一条消息（表单目前没有隐藏），但是如果我们得到一个错误，表格仍然存在，并且还有一条错误消息。

谢谢

Answer 1

试试这个：

$('#paired-results').on('show.bs.collapse', function () {
    
    $('.callToAction').hide();
    });
    
    $('#paired-results').on('hide.bs.collapse', function () {
        $('.callToAction').show();
    });

bootstrap 折叠无效，元素未隐藏

bootstrap collapse not working, element not hiding

html

jquery

bootstrap-4

collapse