Question

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

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

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

Answer 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元素上调用click事件将处理真正的崩溃场景。

显示事件无法在Bootstrap折叠上运行

1 个答案: