Javascript 如何制作<；dd>；a<；dl>；最初通过敲除'隐藏；什么是自定义数据绑定？

我已经创建了一个

，通过使用knockout的数据绑定，单击相应的

，可以将

向下滑动

/
slideUp
。我从关于的教程中得出了我的解决方案

到目前为止，我成功地连接了所有内容，这样我就可以单击
并切换
。最初的计划是将
隐藏起来，但不知何故，我无法做到这一点

下面是一个简化的示例，演示了该问题：

HTML
：

<dl data-bind="foreach: items">
    <dt data-bind="click: toggleDefinition">DT: Lorem ipsum</dt>
    <dd data-bind="slideVisible: definitionVisible, slideDuration: 300">DD: dolor sit amet</dd>    
</dl>

我所尝试的：

通过
CSS
隐藏
s，但它没有像我希望的那样工作（我没有注意到任何区别）：

要将以下属性设置为
true
，它会部分工作-它会隐藏
但您可以看到隐藏它们的动画，这是不可取的：

self.definitionVisible = ko.observable(true);

我还建立了一个

您知道我还可以尝试或更改什么来隐藏
，直到我单击

我不明白为什么会调用
update
函数来再次显示项目。我试图找到触发它的原因，但调用堆栈没有多大帮助（所有内容都来自无法跟踪的敲除）。
更新函数被正确触发，如中所述：

当绑定应用于元素时，Knockout最初将调用更新回调，并跟踪您访问的任何依赖项（可观察项/计算项）

此外，由于逻辑中遗漏了某些情况，处理程序无法工作：您尝试基于当前值显示/隐藏，但应检查以下内容：


如果元素当前处于隐藏状态，且
定义可见的新值
为
真
->，则显示该元素

如果元素当前可见且
definitionVisible
的新值为
false
->，则隐藏该元素

将其转换为您的代码：

update: function (element, valueAccessor, allBindings) {
    var value = ko.unwrap(valueAccessor());
    var duration = allBindings.get('slideDuration') || 400;
    if ($(element).css('display') != 'none' && !value) {
        $(element).slideUp(duration);
    }
    if ($(element).css('display') == 'none' && value) {
        $(element).slideDown(duration);
    }
}

演示。
我知道我错过了一些简单的东西。谢谢；-）
self.definitionVisible = ko.observable(true);

update: function (element, valueAccessor, allBindings) {
    var value = ko.unwrap(valueAccessor());
    var duration = allBindings.get('slideDuration') || 400;
    if ($(element).css('display') != 'none' && !value) {
        $(element).slideUp(duration);
    }
    if ($(element).css('display') == 'none' && value) {
        $(element).slideDown(duration);
    }
}