1
除了将折叠的Bootstrap折叠到本例外的可折叠外，所有的作品都在stackoverflow上，我希望有一些建议。在手风琴模板内部调用两次折叠
当any opened item是clicked到collapse，它的类的变化如下序列：panel-collapse collapse in>panel-collapse collapsing>panel-collapse collapse in。按照正确的顺序，应该导致panel-collapse collapse collapsed。这是尚未解决。问题是collapse被调用两次。
什么解决这个，所以我可以使用它作为模板的一部分？
更新：只有一个panel-group专门打开。现在通过删除data-parent解决解决，它现在允许多个面板同时打开。
我加入bootstrap.js（线608-628）记录：
// COLLAPSE DATA-API
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
console.log("A",data);
if (!data || !data.transitioning) {console.log("B1");
if ($parent) { console.log("B2");
$parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
}
console.log("B3",$target.hasClass('in'));
$this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
}
console.log("C", option);
$target.collapse(option)
console.log("D");
})
生成的日志：
a）在collapse按下第一次，它看起来很乱
bootstrap.js:622 A undefined
bootstrap.js:623 B1
bootstrap.js:624 B2
bootstrap.js:627 B3 false
bootstrap.js:630 C Object {toggle: "collapse", bind: "text:displayLabel, attr:{href:idhash}"}
bootstrap.js:632 D
bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 1}
bootstrap.js:630 C toggle
bootstrap.js:632 D
b）collapse在任何其他时间按下
bootstrap.js:622 A Collapse {$element: x.fn.x.init[1], options: Object, transitioning: 0}
bootstrap.js:623 B1
bootstrap.js:624 B2
bootstrap.js:627 B3 true
bootstrap.js:630 C toggle
bootstrap.js:632 D
bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 1}
bootstrap.js:630 C toggle
bootstrap.js:632 D
正确的输出应为：
a）在collapse按时collapse按下任何其它时间第一次
bootstrap.js:622 A undefined
bootstrap.js:623 B1
bootstrap.js:624 B2
bootstrap.js:627 B3 false
bootstrap.js:630 C Object {toggle: "collapse", bind: "text:displayLabel, attr:{href:idhash}"}
bootstrap.js:632 D
B）
bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 0}
bootstrap.js:623 B1
bootstrap.js:624 B2
bootstrap.js:627 B3 (true or false)
bootstrap.js:630 C toggle
bootstrap.js:632 D
完整的代码：
var confItems = {};
var childrenLength = 2;
confItems["children"] = new Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
confItems.children[i] = {};
confItems.children[i]["idhash"] = "#col-" + (i + 1);
confItems.children[i]["id"] = "col-" + (i + 1);
confItems.children[i]["displayLabel"] = "Item " + (i + 1);
confItems.children[i]["children"] = new Array(childrenLength);
for (var j = 0; j < childrenLength; j++) {
confItems.children[i].children[j] = {};
confItems.children[i]["idhash"] = "#col-" + (i + 1) + "-" + (j + 1);
confItems.children[i]["id"] = "col-" + (i + 1) + "-" + (j + 1);
confItems.children[i].children[j]["displayLabel"] = "Item " + (i + 1) + "." + (j + 1);
confItems.children[i].children[j]["children"] = new Array(0);
}
}
var viewModel = function() {
this.tree = ko.observable(confItems);
};
ko.applyBindings(new viewModel());<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="template: {name:'largeTemplate', data: tree}"></div>
<script id='largeTemplate' type='text/html'>
<div class="panel-group">
\t <div id="accordion" class="panel panel-default" data-bind="foreach: children">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t <a data-toggle="collapse" data-parent="#accordion" data-bind="text:displayLabel, attr:{href:idhash}">Lorem</a>
\t \t </h4>
</div>
<div data-bind="attr:{id:id}" class="panel-collapse collapse">
<div class="panel-body" data-bind="foreach: children">
<div class="panel-heading">
<a data-bind="text:displayLabel">Donec</a>
</div>
</div>
</div>
</div>
</div>
</script>