敲擊：單擊頁面的其他位置並隱藏元素

Question

我正在創建2級菜單，因此如果單擊頁面的其他位置，而不是子菜單本身，則單擊頂部菜單項，子菜單將顯示，子菜單應該隱藏。我並不傾向於爲body標籤添加點擊綁定，反正它不起作用，但是我能做些什麼來實現這一點？ 這是我的代碼到目前爲止。

<div id="menuholder"> 
<ul id="topmenu"> 
    <li data-bind="click: showMenu.bind($data, 1)">top menu item</li> 
    <ul class="submenu" data-bind="visible: selected() == '1'"> 
     <li><a href="#">submenu item</a></li> 
    </ul> 
</ul> 
</div> 
<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); 
    }; 
    self.hideMenu = function() { 
     self.selected(0); 
    } 
} 
ko.applyBindings(new menuModel(), document.getElementById("menuHolder")); 

Answer 1

$('yourParentDivId').click(function(e) { 
    if (!($(e.target).is('topmenu') && $(e.target).is('submenu'))) { 
     alert('clicked'); 
     self.hideMenu(); 
    } 
}); 

Refer Here knockout delegate event

Answer 2

如果你看看Twitter Bootstrap如何完成其​​下拉菜單，它增加了一個事件html元素：

內部下拉類定義：

... 
    $('html').on('click.dropdown.data-api', function() { 
     $el.parent().removeClass('open') 
    }) 

你可以嘗試一些類似。