1

ストアの在庫ページに「アイテム」を追加するためのテンプレートがあります。名前や価格などの情報のみを表示するにはアイテムを最小化する必要がありますが、クリックすると追加情報が表示されます。リストは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>

情報をお寄せいただきありがとうございます。

4

1 に答える 1

1

私は単に次のjQueryを使用しました：

jQuery(document).ready(function(){
$('.accordion .head').click(function() {
    $(this).next().toggle('slow');
    return false;
}).next().hide();
});

このコードは、@Ingro によって提案されたJquery UI アコーディオン ドキュメントで指定されています。教えてくれてありがとう。

これにより、複数のセクションを開くことができ、また、使用したくない jQuery UI スタイルと格闘する必要がなくなります。私は実際に Twitter のブートストラップの「折りたたみ」クラスを使用しました。

于 2012-07-08T00:37:23.637 に答える