Bootstrap 3手风琴嵌套折叠意外触发滚动问题求助

你可以通过以下几种方式实现仅主手风琴面板触发滚动逻辑，内部折叠面板不触发：

方案一：通过类名判断触发元素 #

利用主面板已有的mainPanel类，在事件处理函数中判断当前触发事件的元素是否为主面板，非主面板则跳过滚动逻辑：

$(document).ready(function () {
    $('.panel-collapse').on('shown.bs.collapse', function (e) {
        // 仅当触发元素是主面板时执行滚动
        if (!$(this).hasClass('mainPanel')) {
            return;
        }
        var $panel = $(this).closest('.panel');
        $('html,body').animate({
            scrollTop: $panel.offset().top
        }, 500); 
    }); 
});

方案二：精准绑定主面板事件 #

直接给主面板元素绑定事件，避免内部折叠面板触发：

$(document).ready(function () {
    // 只选择#accordion下带mainPanel类的panel-collapse元素绑定事件
    $('#accordion .panel-collapse.mainPanel').on('shown.bs.collapse', function (e) {
        var $panel = $(this).closest('.panel');
        $('html,body').animate({
            scrollTop: $panel.offset().top
        }, 500); 
    }); 
});

方案三：阻止内部折叠面板的事件冒泡 #

给内部折叠面板绑定事件，阻止事件向上冒泡到主面板，避免触发滚动逻辑：

$(document).ready(function () {
    $('.panel-collapse').on('shown.bs.collapse', function (e) {
        var $panel = $(this).closest('.panel');
        $('html,body').animate({
            scrollTop: $panel.offset().top
        }, 500); 
    }); 

    // 阻止内部折叠面板的事件冒泡
    $('.collapse13-CollapseText').on('shown.bs.collapse', function (e) {
        e.stopPropagation();
    });
});

说明 #

• 方案一和方案二更推荐，逻辑清晰且维护成本低，尤其是方案一，后续新增主面板只需添加mainPanel类即可自动生效。
• 方案三适合内部折叠面板类名固定的场景，需要确保所有内部折叠面板都被选中。

内容的提问来源于stack exchange，提问作者That's a Great Question