javascript - 确定引发 Bootstrap 事件的原因

Question

我有一个 Bootstrap Accordion 和一个可展开所有 Accordion 面板的按钮。这工作得很好。

HTML:

<div class="btn btn-primary btn-sm" id="accordion-expand-all">Expand all</div>

JS:

$("#accordion-expand-all").click(function() {
    $(".panel-collapse").each(function() {
        if ($(this).hasClass("in") === false) {
            $(this).collapse("toggle");
        };
    });
});

问题:

我想这样做，以便当用户单击面板的标题时，如果 Accordion 面板折叠，则面板展开......并且窗口向下滚动，以便 Accordion 面板的标题位于页面顶部。

一种简单的方法是向 Bootstrap shown.bs.collapse 事件调用诸如 pageScrollToTop(expandedPanel) 之类的函数。但这与“全部展开”按钮冲突，每次展开 Accordion 面板时，该按钮都会引发 shown.bs.collapse ，从而将页面滚动到各处。

我知道这不太可能，但是当引发 shown.bs.collapse 事件时，是否有办法确定它是否是由用户的点击引发的 ，还是以编程方式引发(如使用“全部展开”按钮)？如果是这样，我的网站就会知道何时以及何时不调用 pageScrollToTop()。

Answer 1

当有人单击未展开的 Accordion 项目后，您可以触发一次仅事件。这并不完全是您想要的(确定以编程方式触发的事件还是用户触发的事件)，但它应该可以工作。

$('a[data-toggle=collapse]').on('click', function(){
    if($(this).is('.collapsed')) {
        $(this.getAttribute('href')).one('shown.bs.collapse', function(){
            $(document.body).stop().animate({scrollTop: $(this).offset().top});
        });
    }
});

这是一个演示:http://jsfiddle.net/97vju2b7/