Question

我有一个菜单，每个项目切换它自己的子菜单，这是示例代码。正如您所看到的，子菜单项是链接到google.co.nz的标记

  <ul id="menuHolder">
    <li data-bind="click: showMenu.bind($data, 1)"> 
         Main menu item
        <ul class="submenu" data-bind="visible: selected() == '1'">
            <li>
               <a class="sub-item" href="http://google.co.nz">
                    Submenu item
               </a>
             </li>
        </ul>
    </li>
 </ul>
<script type="text/javascript">
  var menuModel = function () {
    var self = this;
    self.selected = ko.observable(0);        
    self.showMenu = function (data) {
        var s = self.selected();
        if (s > 0 && data == s)
            self.selected(0);
        else
            self.selected(data);
    };     
}
ko.applyBindings(new menuModel(), document.getElementById("menuHolder"));
</script>

一切都有效，只有标签不再有用，这里有什么问题？

Answer 1

您的问题如下：单击该链接会引发点击事件，该事件会被您的showMenu功能处理并处理，默认情况下，KO不会触发浏览器的默认行为，因此您的链接会赢得'打开。

您需要在链接上添加一个单击事件处理程序，返回true这会告诉KO触发浏览器默认行为，您可能还需要将clickBubble属性设置为{{1}阻止你的false执行：

showMenu

可以在documentation中了解有关点击装订的更多信息。

演示JSFiddle.

Knockout.js：当父li元素具有单击绑定时，child标签不起作用

1 个答案: