引导手风琴如何检查哪个面板处于活动状态

Posted 2023-02-22

【中文标题】引导手风琴如何检查哪个面板处于活动状态

【英文标题】：bootstrap accordion how to check which panel is active

【发布时间】：2014-09-23 12:25:00

【问题描述】：

我正在使用 Bootstrap 的手风琴小部件来包含多个表单，即每个面板包含一个表单。选择最后一个面板时，来自其他面板的数据旨在发布，该数据将用于绘制数据。但是，我无法进入发布部分，因为我无法确定当前选择了哪个面板。我知道这与一类活动或非活动有关，但我认为引导程序的手风琴不像 jquery 手风琴那样支持该功能。

我试图弄清楚第一部分，即检查用户是否点击了最后一个面板。在我的 html 代码中，它的 ID 为#results。这是一个jsfiddle，它演示了我面临的问题。当用户点击#results标签时，它似乎没有触发第二个警报功能，不知道为什么。

示例 javascript 代码：

 $('#accordion').on('show.bs.collapse', function () 
    $('#results').click(function () 
        alert("works"); //testing purposes
    );
);

【问题讨论】：

bootstrap.js Accordion Active Index?的可能重复

【参考方案1】：

$('#accordion').on('show.bs.collapse', function (accordion) 
    var $activeCard = $(accordion.delegateTarget.children);
);

或

$('#accordion').on('show.bs.collapse', function () 
    var $activeCard = $(this.children);
);

【参考方案2】：

这是一个旧线程，但我想发布一个答案，因为没有建议预期的结果。

这里你需要做的是用事件处理器来处理当前选中的折叠项。如果为此使用this 关键字，则可以访问所选对象的值（例如，仅表单中的一项）。

在这里您可以获取$(".collapse") 元素。 您可以使用$(this).parent().index() 获取活动项目的index 编号。 同样，您可以使用$(this).attr('id') 获取活动项目的id。

您的 jQuery 结构将是：

$(".collapse").on('show.bs.collapse', function()

 //0,1,2,etc..
 var index = $(this).parent().index();
 
 //collapseOne, collapseTwo, etc..
 var id =  $(this).attr('id')
 
 //alert('Index: ' + index + '\nItem Id: ' + id );
 console.log('Index: ' + index)
 console.log('Item Id: ' + id)
  
 if(id === 'collapseFour')
 
        var username = $('#username').val();
        var email = $('#email').val();
        var age = $('#age').val();
        
    //here you can check the data from the form
    
        $("#result").html("<p> UserName: " + username + "</p> <p> EMail: " + email + "</p> <p> Age: " + age + "</p>");
 
);

我在这里为您提供了一个工作示例 (jsfiddle)。

【参考方案3】：

这是你想要的吗？

小提琴： Demo

把这个放在 on 函数之外

 $('#results').click(function ()
        alert("clicked");
    );  

【参考方案4】：

你为什么不这样做？

$('#results').click(function ()
    alert("clicked");
);   

只要去掉手风琴功能，就可以直接得到点击事件