0

この質問で参照するフィドルは次のとおりです：http：//jsfiddle.net/CJRDQ/3/

私は次のような単純なカスタムエキスパンダーを作成しました：

<div class="ui-expander">
  <h3 class="ui-expander-head">...</h3>
  <div class="ui-expander-content">...</div>
</div>

エクスパンダの機能は、カスタムKnockout.jsバインディングと一部のjQueryを介して組み込まれています（カスタムバインディングの使用は、バインディングによって作成された問題に対処するためのものですwith）。

ko.bindingHandlers.expand = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        if ($(element).hasClass('ui-expander')) {
            var expander = element;
            var head = $(expander).find('.ui-expander-head');
            var content = $(expander).find('.ui-expander-content');

            $(head).click(function () {
                $(head).toggleClass('ui-expander-head-collapsed')
                $(content).toggle();
            });
        }
    }
};

エキスパンダーヘッドにクリック可能なコントロールがない限り、これは期待どおりに機能します。現在のシナリオでは、ビューモデルで結果をフィルタリングするために、エキスパンダーヘッドにチェックボックスを提供する必要があります。

<div class="ui-expander" data-bind="expand: true">
    <h3 class="ui-expander-head">
        <span class="ui-expander-toggle">[-]</span> Expander Title
        <input id="cbx" type="checkbox" data-bind="checked: showAll" /> <label for="cbx">Show All</label>
    </h3>
    <div class="ui-expander-content">
        Expander Content
    </div>
</div>

ラベルをクリックすると、展開/折りたたみ動作がトリガーされず、対応するチェックボックスがオン/オフになります（望ましい）。ただし、チェックボックスを直接クリックすると、展開/折りたたみがトリガーされ、対応するチェックボックスがオン/オフ（不要）になります。

展開/折りたたみをトリガーせずにチェックボックスやラベルをクリックできるようにする必要がありますが、エキスパンダーヘッドの他の部分がクリックされた場合は、展開/折りたたみを維持します。これらの要件を満たすために何をする必要がありますか？

繰り返しになりますが、参考のためにフィドルを提供しました：http: //jsfiddle.net/CJRDQ/3/

4

2 に答える 2

2

クリック ハンドラーを追加し、イベントで stopPropagation() を呼び出して、ヘッダーへの伝播を防ぎ、true を返すことで、状態を変更するためにチェックボックスによって引き続き処理されるようにすることができます。チェックボックスの状態を変更できるようにし、展開または折りたたみをトリガーしないようにする場合は、ラベルにもハンドラーを追加する必要があります。

<input id="cbx" type="checkbox" data-bind="checked: showAll, click: preventClick" />
<label for="cbx" data-bind="click: preventClick">

モデルを見る:

this.preventClick = function(data, event) {
    event.stopPropagation();
    return true;
};

http://jsfiddle.net/HGxc6/

于 2012-06-27T19:58:37.447 に答える
0

あなたの要件は私には少し混乱しているように見えました。この更新されたフィドルはあなたが探していたものですか: http://jsfiddle.net/photo_tom/CJRDQ/6/

于 2012-06-27T20:19:25.340 に答える