如何使功能只对一个按钮起作用？ Bootstrap-5 滚动到模式底部

Question

我想要实现的是创建两个按钮： 1：打开模式 window 2：打开相同的模式并滚动到底部

代码：

$('#menu-item-6706').on('click', function (){
    $('#exampleModal').on('shown.bs.modal', function (event) {
        $("#exampleModal .modal-body").animate({ scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")}, 'slow');
    });
});

这是完整的 jsfiddle 片段： https://jsfiddle.net/mkx2auhj/1/

脚本即将运行：

如果您第一次触发“启动演示模式”，它会打开模式。如果您触发“联系人”，它会打开模式并滚动到底部。所以是正确的。

问题是，如果您再次点击“启动演示模式”，它会再次滚动到底部，这是不可取的。我希望它像第一次一样打开标准模式。

Answer 1

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-bs-* attributes to vary the contents of the modal depending on which button was clicked. https://getbootstrap.com/docs/5.1/components/modal/#varying-modal-content

将 'shown.bs.modal' 事件侦听器移到单击事件之外，并使用 event.relatedTarget 检测“联系”按钮何时切换模态，然后相应地为模态设置动画。试试这个

$('#exampleModal').on('shown.bs.modal', function (event) {
    if( $(event.relatedTarget).is('#menu-item-6706') ){
        $("#exampleModal .modal-body").animate({ 
            scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")
        }, 'slow');
    }
});

如何使功能只对一个按钮起作用？ Bootstrap-5 滚动到模式底部

How to make function work only for one button? Bootstrap-5 scroll to modals bottom

javascript

jquery

bootstrap-5