Question

以下是这个问题的小提琴：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（use of custom binding is to address issues created by the with binding）来实现。

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/

Answer 1

您可以添加单击处理程序并在事件上调用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/

Answer 2

你的要求对我来说似乎有点混乱。这是您所寻找的更新小提琴：http://jsfiddle.net/photo_tom/CJRDQ/6/

单击复选框时，防止自定义Knockout / jQuery扩展器的展开/折叠

2 个答案: