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 回答