Sample JS Fiddle

此位切换菜单，使得在加载时可见：

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

当我在淘汰赛buttonClick功能中使用相同的代码时，菜单会按预期切换，但它会再切换一次并保持隐藏状态。

在jsfiddle中我已经通过警报连接了引导程序显示的事件，在那里你可以看到菜单实际上已切换。

问题：

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

Answer 1

按钮上的点击事件存在问题。修复方法是将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将允许click事件继续冒泡   任何更高级别的事件处理程序。例如，如果你的元素   然后，该元素的父元素都处理click事件   将触发两个元素的单击处理程序。如有必要，   您可以通过添加额外的内容来防止事件冒泡   绑定名为clickBubble并将false传递给它，如下所示   例如：

Answer 2

我在Firefox 31上没有遇到任何问题。你的代码实际上是有效的。

您的配置是什么？

使用Knockout点击绑定切换引导下拉列表

Sample JS Fiddle

2 个答案:

JS Fiddle Demo

Knockout Reference