Question

我有一个Bootstrap手风琴和一个扩展所有手风琴面板的按钮。这很好。

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 panel的标题位于页面顶部。

一种天真的方法是向Bootstrap pageScrollToTop(expandedPanel)事件调用shown.bs.collapse之类的函数。但这与“全部展开”按钮发生冲突，每次展开手风琴面板时都会引发shown.bs.collapse，从而在整个地方滚动页面。

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

Answer 1

在有人点击未展开的手风琴项目后，您可以触发一次性事件。它不是你所追求的（确定以编程方式触发的vs用户触发的事件），但它应该有效。

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

Answer 2

作为一种解决方法，我将一个点击处理程序附加到accordion panel-headers，并创建了一个＆＃34; mock＆＃34;之后滚动页面的show.bs.collapse事件（我偷看了bootstrap.js代码库以找出如何执行此操作）。

按钮只是迭代手风琴面板并调用$("#foo-panel").collapse("toggle")，这会引发真正的show.bs.collapse事件。

确定引发Bootstrap事件的原因

2 个答案: