我有一个模板,用于将"商品"添加到商店库存页面。 我需要最小化项目以仅显示名称和价格等信息,但一旦单击它就会扩展到其他信息。 该列表正在使用 KNOCKOUTJS,我不确定如何连接 Twitter Bootstrap Collapse 项目。 我引用的div 的 id 是重复的,因此切换"更多信息"div 的链接只会切换页面上的第一个div。 这是我到目前为止的代码。 我需要每个链接来切换它后面的div,无论模板化标记有多少个实例。
<ul data-bind="foreach: items" class="inline">
<fieldset>
<legend>Store Item List</legend>
<li class="separator"><div id="item-accordian">
<div class="row">
<a id="store-item" data-toggle="collapse" data-target=".collapse" href="#store-item-details">
<div class="span2">
<strong>Name: </strong><span data-bind="text: Name"></span>
</div>
<div class="span2">
<strong>Price: </strong><span data-bind="text: FormatUnitPrice"></span>
</div>
<div class="span2">
<strong>Type: </strong><span data-bind="text: ItemType"></span>
</div>
<div class="span2">
<strong>Status: </strong><span data-bind="text: Status"></span>
</div>
</a>
</div>
<div id="store-item-details" class="collapse">
<div class="row">
<div class="span1">
<strong>Description:</strong>
</div>
<div class="span4">
<span data-bind="text: Description"></span>
</div>
</div>
<div class="row">
<div class="span8">
<ul data-bind="foreach: ItemAttributes">
<li class="control-group">
<div class="controls">
<div class="float-left omega-spacer-10">
<strong data-bind="text: Name">:</strong></div>
<div class="float-left omega-spacer-35">
<select class="input-medium" data-bind="options: AttributeValues, optionsText: 'Text', optionsValue: 'Value'">
</select></div>
</div>
</li>
</ul>
<div class="row">
<div class="span8 float-right">
<div class="float-right">
<button data-bind="click: $parent.deleteItem">
Delete</button></div>
<div class="float-right">
<button data-bind="click: $parent.editItem">
Edit</button></div>
</div>
</div>
</div>
</div>
</div></div>
</li>
</fieldset>
</ul>
感谢您提供您可能拥有的任何信息。
我只是使用了以下jQuery:
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});
此代码在 @Ingro 建议的 Jquery UI 折叠文档中指定。 谢谢你指点我那里。
这允许打开多个部分,也让我不必与我不想使用的 jQuery UI 样式作斗争。 我实际上使用了 Twitter 引导程序中的"折叠"类,它给出了很好的边框效果,所以我不必手动想出一些东西。