大佬教程收集整理的这篇文章主要介绍了jquery – Twitter bootstrap手风琴没有崩溃，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
var data = { "d": [ { "__type": "Warehouse.Tracntrace.Members_Only.DLl.StockMovement.AvailibleStock","WarehousEID": 1,"ProductSKUID": 1,"ProductSKUName": "Decoder 1132","Warehousename": "SoftwareDevelopmentTest","Status": "Staging","QtyUnassigned": 10 },{ "__type": "Warehouse.Tracntrace.Members_Only.DLl.StockMovement.AvailibleStock","ProductSKUID": 2,"ProductSKUName": "Decoder 1131","QtyUnassigned": 5 } ] }; var data2 = { "d": [ { "__type": "Warehouse.Tracntrace.Members_Only.DLl.StockMovement.StockReturnMethod","LotID": 2,"LotName": "TestLot2","AreaID": 8,"AreaName": "TestArea3L2","BinID": 18,"BinName": "Area8Bin2" },{ "__type": "Warehouse.Tracntrace.Members_Only.DLl.StockMovement.StockReturnMethod","LotID": 3,"LotName": "TestLot3","AreaID": 11,"AreaName": "TestArea2L3","BinID": 20,"BinName": "Area10Bin1" },"LotID": 4,"LotName": "TestLot4","AreaID": 15,"AreaName": "TestArea2L4","BinID": 24,"BinName": "Area14Bin1" },{ "__type": "Warehouse.Tracntrace.Members_Only.DLl.StockMovement.StockReturnMethod","BinName": "Area8Bin2" },"BinName": "Area14Bin1" } ] }; var Productviewmodel; //debugger; //Binds viewmodel function bindProductModel(Products) { var self = this; self.items = ko.mapping.fromJS([]); Productviewmodel = ko.mapping.fromJS(Products.d,self.items); console.log(Productviewmodel()); } //Binds First DataSet function bindModel(vm,data) { var self = this; vm.LOCATIOns = ko.mapping.fromJS(data.d); console.log(Productviewmodel()); $('#accordion2').collapse({ toggle: false }) } //StarTing Function $(document).ready(function () { bindProductModel(data); bindModel(Productviewmodel()[0],data2); ko.applyBindings(Productviewmodel); })
这是HTML：
<div class="accordion" id="accordion2" data-bind="foreach: items"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#" data-bind="text: ProductSKUName"></a> </div> <div id="collapSEOne" class="accordion-body collapse in"> <div class="accordion-inner"> <div id="injectbody"> <table class="table table-Striped"> <thead> <tr> <th> # </th> <th> Lot </th> <th> Area </th> <th> Bin </th> <th> Qty To Assign </th> </tr> </thead> <tbody data-bind="foreach: LOCATIOns"> <tr> <td id="Assign"> <input type="checkBox" /> </td> <td id="Lot" data-bind="text: LotName"> </td> <td id="Area" data-bind="text: AreaName"> </td> <td id="Bin" data-bind="text: BinName"> </td> <td id="QtyToAssign"> <input type="text" /> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div>
任何有关这方面的帮助将不胜感激.
所以你可以从你的javascript中删除$(‘#accordion2’).collapse()调用.
但是,您必须确保使用/生成正确的数据属性,因此需要在HTML中更改一些内容：
data-parent =“#accordion”应该是data-parent =“#accordion2”,因为你的主div中有id =“accordion2”.
您的手风琴乐体应具有唯一的ID,因此您需要使用knockout $index()生成它们：
<div data-bind="attr: {id: 'collapse'+$index()}" class="accordion-body collapse">
并且您必须在折叠链接上指定具有数据目标属性的css选择器,以告知应折叠哪个元素：
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#" data-bind="text: ProductSKUName,attr: {'data-target': '#collapse'+$index() }"></a>
演示JSFiddle.
请注意,我已从示例中的行中删除了类：
<div id="collapSEOne" class="accordion-body collapse in">
因为否则两个手风琴部分都会默认打开.
以上是大佬教程为你收集整理的jquery – Twitter bootstrap手风琴没有崩溃全部内容，希望文章能够帮你解决jquery – Twitter bootstrap手风琴没有崩溃所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。