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

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不会触发浏览器的默认行为,因此您的链接将无法打开.

你需要的是在你的链接上添加一个click事件处理程序,它返回true它告诉KO触发浏览器默认行为,你可能还需要设置clickBubbleproperty false来阻止你的showMenu执行:

<a class="sub-item" href="http://google.co.nz"
   data-bind="click: function(){ return true }, clickBubble: false" >
      Submenu item
</a>

可以在文档中阅读有关click绑定的更多信息.

演示JSFiddle.