使用 Knockout 点击绑定切换引导下拉菜单答案

【问题标题】：Toggle a bootstrap dropdown with Knockout click binding使用 Knockout 点击绑定切换引导下拉菜单
【发布时间】：2014-10-07 17:27:59
【问题描述】：

是否可以使用敲除触发bootstrap下拉功能？

我制作了一个 jsfiddle 来突出问题：

Sample JS Fiddle

此位切换菜单并使其在加载时可见：

$('.dropdown-toggle').dropdown('toggle');

当我在敲除 buttonClick 函数中使用相同的代码时，菜单将按预期切换，但它会再切换一次并保持隐藏状态。

在 jsfiddle 中，我已经连接了带有警报的引导显示事件，在那里您可以看到菜单实际上是切换的。

问题：

如何强制菜单只切换一次？还是我应该使用不同的方法？

【问题讨论】：

标签： jquery twitter-bootstrap knockout.js

【解决方案1】：

我在 Firefox 31 上执行此操作没有问题。您的代码确实有效。

你的配置是什么？

【讨论】：

我使用 chrome。但是在您发表评论后，我也在 Firefox 中进行了测试，但它仍然对我不起作用。显示警告框后，菜单将再次关闭。单击“菜单”文本并比较行为:)
这不是答案。我知道你目前还不能发表评论，但我会删除它，否则它可能会被否决和/或标记为删除。

【解决方案2】：

按钮上的点击事件存在问题。解决方法是将clickBubble: false 添加到按钮上的data-bind。我认为你的活动正在冒泡，所以它会立即打开和关闭，所以你不会看到它。

查看工作示例：

JS Fiddle Demo

标记：

<div class="dropdown" id="myDropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu</a>

    <ul class="dropdown-menu">
        <li>Here goes stuff</li>
    </ul>
</div>

<button data-bind="click: buttonClick, clickBubble: false">Button</button>

JS：

var viewModel = function () {
    var self = this;
    self.buttonClick = function(){
        $('.dropdown-toggle').dropdown('toggle');
    }
}

ko.applyBindings(new viewModel());

Knockout Reference

注意 4：防止事件冒泡

默认情况下，Knockout 会允许点击事件继续冒泡直到任何更高级别的事件处理程序。例如，如果您的元素并且该元素的父元素都在处理点击事件，然后将触发两个元素的点击处理程序。如有必要，您可以通过添加一个额外的来防止事件冒泡名为 clickBubble 的绑定并将 false 传递给它，就像在这个示例：

【讨论】：