显示事件在 Bootstrap 上不起作用答案

【问题标题】：Show event not working on Bootstrap Collapse显示事件在 Bootstrap 上不起作用
【发布时间】：2013-11-13 05:04:00
【问题描述】：

“显示”事件似乎不适用于动态创建的可折叠。调用 javascript 函数时，多个面板保持打开状态。单击面板标题仍然可以正常工作，如果我先手动单击面板，则“显示”方法似乎可以工作。但只有当我先点击面板标题时。有什么想法吗？

JSFiddle 示例：http://jsfiddle.net/victoryismine06/N6rey/

//Click handler
$( "#btnOpen" ).click(function() {
  var idx = $("#idx").val();
    $("#accordion2 #collapse" + idx).collapse('show');    
});

【问题讨论】：

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试这个方法。

$("#btnOpen").click(function () {
    var idx = $("#idx").val();
    //Just find the data-toggle element respective to the current element and invoke the click on it.
    $("#collapse" + idx).filter(':not(.in)').prev().find('[data-toggle]').trigger('click.bs.collapse.data-api');

   //or just simply do:
   // $("#accordion2").find('[data-toggle]:eq(' + idx + ')').trigger('click.bs.collapse.data-api');

   //Or you can also do:
   //$("#accordion2 .panel-collapse.in").not($("#collapse" + idx).collapse('show')).collapse('hide');
});

Demo

调用collapse 方法的原因只会根据传递的类型折叠当前元素，即隐藏、显示或切换。它不处理其他打开项目的自动折叠，这是在附加到可折叠的[data-toggle] 元素的自定义单击事件中处理的。即在以下部分：

$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {

因此，在相应的data-toggle 元素上调用点击事件将处理真正的崩溃场景。

【讨论】：

好的，我想我听懂了你的意思。那我不明白的是，为什么要先“单击”面板，“修复”问题？如果我先单击，然后调用“显示”，它似乎可以工作。无论哪种方式，感谢您的解释以及您的回答。
@JIsaak 在您的示例中，即使先单击面板也会出现同样的问题。首先单击面板，然后单击按钮，您将看到两者都打开了。
尝试先点击所有三个。然后它对“表演”感到满意。无论您首先单击哪个面板，都将变为“固定”，而未单击的面板就好像它们不属于该组一样。
@JIsaak 那是因为点击事件设置了这些可折叠的数据，所以在所有点击事件之后，您将从那里获得所有数据集，折叠按预期工作。或者你也可以做`$("#accordion2 .panel-collapse.in").not($("#collapse" + idx).collapse('show')).collapse('hide');`跨度>