javascript - Knockout.js：当父 li 元素具有点击绑定时，子标签不起作用

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>

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

Answer 1

您的问题如下：单击链接会引发 click 事件，该事件会发生并由您的showMenu函数处理，默认情况下 KO 不会触发浏览器的默认行为，因此您的链接不会打开。

您需要在链接上添加一个单击事件处理程序，该处理程序返回truethis 告诉 KO 触发浏览器默认行为，您可能还需要设置clickBubble属性false以防止showMenu执行：

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

可以在文档中阅读更多关于点击绑定的信息。

演示JSFiddle。