【问题标题】:bootstrap collapse not working, element not hiding引导崩溃不起作用,元素不隐藏
【发布时间】:2021-01-28 15:45:24
【问题描述】:

这是我的代码,我已经尝试了很多方法。

$('#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>

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

谢谢

【问题讨论】:

  • 您好,您提交表单时页面不会刷新吗?

标签: html jquery bootstrap-4 collapse


【解决方案1】:

试试这个:

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

【讨论】:

  • 它成功了,但是你能告诉我我的代码有什么问题吗?据我所知,你的和我的没有区别
猜你喜欢
  • 2013-06-17
  • 1970-01-01
  • 2011-11-21
  • 2023-04-08
  • 2018-04-02
  • 1970-01-01
  • 2014-07-03
  • 2014-01-04
  • 2019-07-18
相关资源
最近更新 更多